Jacob Clevenger
4 years ago
commit
fda59d0afd
18 changed files with 11380 additions and 0 deletions
@ -0,0 +1,7 @@ |
|||
.DS_Store |
|||
.vite-ssg-dist |
|||
.vite-ssg-temp |
|||
*.local |
|||
dist |
|||
dist-ssr |
|||
node_modules |
|||
@ -0,0 +1,7 @@ |
|||
src |
|||
public |
|||
node_modules |
|||
demo |
|||
.vscode |
|||
index.html |
|||
vite.config.ts |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"volar.tsPlugin": true |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
MIT License |
|||
|
|||
Copyright (c) 2021 Jacob Clevenger |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in all |
|||
copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|||
SOFTWARE. |
|||
@ -0,0 +1,24 @@ |
|||
# Vaguer |
|||
|
|||
This repo provides a basic setup for developing component libraries in Vite with Vue 3 |
|||
|
|||
## Features |
|||
- Type Generation |
|||
- Tailwind CSS via [WindiCSS](https://windicss.netlify.app/) |
|||
- Automatically export and register all components in `./src/components` |
|||
- `./demo` folder where you can test your components |
|||
|
|||
## Checklist |
|||
After you clone the repo there are a few things you are going to want to change. |
|||
|
|||
- [ ] Rename `name` field in `package.json` |
|||
- [ ] Rename `module` and `main` fields in `package.json`(for example `"module": "./dist/[my-package].js"`) |
|||
- [ ] Make the same changes in the previous step to the exports field |
|||
- [ ] Change the author name in `LICENSE` |
|||
- [ ] Clean up the README |
|||
|
|||
## Commands |
|||
```bash |
|||
npm run dev # Will run the demos app so you can see your components |
|||
npm run build # Will build your components into a library and generate types |
|||
``` |
|||
@ -0,0 +1,12 @@ |
|||
<script setup lang="ts"> |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
My Components |
|||
<div> |
|||
<VaguerButton>Hello World</VaguerButton> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,7 @@ |
|||
import { createApp } from 'vue' |
|||
import { VaguerComponents } from '../src/main' |
|||
import App from './App.vue' |
|||
|
|||
const app = createApp(App) |
|||
app.use(VaguerComponents) |
|||
app.mount('#app') |
|||
@ -0,0 +1,13 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" href="/favicon.ico" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>Vite App</title> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/demo/main.ts"></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,46 @@ |
|||
{ |
|||
"name": "vaguer", |
|||
"version": "0.0.0", |
|||
"files": [ |
|||
"dist" |
|||
], |
|||
"main": "./dist/vaguer.umd.js", |
|||
"module": "./dist/vaguer.es.js", |
|||
"types": "./dist/main.d.ts", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build && tsc --emitDeclarationOnly" |
|||
}, |
|||
"exports": { |
|||
".": { |
|||
"import": "./dist/vaguer.es.js", |
|||
"require": "./dist/vaguer.umd.js" |
|||
}, |
|||
"./style.css": { |
|||
"import": "./dist/style.css", |
|||
"require": "./dist/style.css" |
|||
} |
|||
}, |
|||
"dependencies": { |
|||
"vue": "^3.0.5" |
|||
}, |
|||
"devDependencies": { |
|||
"@antfu/eslint-config": "^0.4.3", |
|||
"@typescript-eslint/eslint-plugin": "^4.15.2", |
|||
"@vitejs/plugin-vue": "^1.1.4", |
|||
"@vue/compiler-sfc": "^3.0.5", |
|||
"cross-env": "^7.0.3", |
|||
"eslint": "^7.20.0", |
|||
"tsup": "^4.3.1", |
|||
"typescript": "^4.1.3", |
|||
"vite": "^2.0.3", |
|||
"vite-plugin-windicss": "^0.5.0" |
|||
}, |
|||
"eslintConfig": { |
|||
"extends": "@antfu/eslint-config", |
|||
"rules": { |
|||
"no-unused-vars": "off", |
|||
"@typescript-eslint/no-unused-vars": "off" |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,29 @@ |
|||
<script setup lang="ts"> |
|||
</script> |
|||
|
|||
<template> |
|||
<button class="vaguer-button"> |
|||
<slot /> |
|||
</button> |
|||
</template> |
|||
|
|||
<style lang="postcss"> |
|||
.vaguer-button { |
|||
@apply |
|||
border-none |
|||
bg-teal-500 |
|||
text-white |
|||
font-bold |
|||
px-4 |
|||
py-2 |
|||
rounded |
|||
cursor-pointer |
|||
|
|||
transform |
|||
duration-100 |
|||
ease-in-out |
|||
|
|||
hover:(bg-teal-600) |
|||
active:(scale-90); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,13 @@ |
|||
const components = import.meta.globEager('./**/*.vue') |
|||
|
|||
const exportable: any = {} |
|||
|
|||
function getName(key: string) { |
|||
return key.substring(location.pathname.lastIndexOf('/') + 2).split('.vue')[0] |
|||
} |
|||
|
|||
Object.entries(components).forEach(([key, value]) => { |
|||
exportable[getName(key)] = value.default |
|||
}) |
|||
|
|||
export default exportable |
|||
@ -0,0 +1,12 @@ |
|||
import type { Plugin } from 'vue' |
|||
|
|||
import components from './components' |
|||
export default components |
|||
|
|||
export const VaguerComponents: Plugin = { |
|||
install(app) { |
|||
Object.entries(components).forEach(([key, value]: [string, any]) => { |
|||
app.component(key, value) |
|||
}) |
|||
}, |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
declare module '*.vue' { |
|||
import { DefineComponent } from 'vue' |
|||
const component: DefineComponent<{}, {}, any> |
|||
export default component |
|||
} |
|||
@ -0,0 +1,28 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"baseUrl": ".", |
|||
"module": "ESNext", |
|||
"target": "es2016", |
|||
"lib": ["DOM", "ESNext"], |
|||
"strict": true, |
|||
"esModuleInterop": true, |
|||
"incremental": true, |
|||
"skipLibCheck": true, |
|||
"moduleResolution": "node", |
|||
"resolveJsonModule": true, |
|||
"noUnusedLocals": true, |
|||
"strictNullChecks": true, |
|||
"forceConsistentCasingInFileNames": true, |
|||
"declaration": true, |
|||
"emitDeclarationOnly": true, |
|||
"outDir": "./dist", |
|||
"types": [ |
|||
"vite/client", |
|||
], |
|||
"paths": { |
|||
"~/*": ["src/*"] |
|||
} |
|||
}, |
|||
"include": ["src"], |
|||
"exclude": ["dist", "node_modules"] |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
import path from 'path' |
|||
import { defineConfig } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import WindiCSS from 'vite-plugin-windicss' |
|||
|
|||
declare const __dirname: string |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
build: { |
|||
lib: { |
|||
entry: path.resolve(__dirname, 'src/main.ts'), |
|||
}, |
|||
rollupOptions: { |
|||
external: ['vue'], |
|||
output: { |
|||
globals: { |
|||
vue: 'Vue', |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
plugins: [ |
|||
vue(), |
|||
WindiCSS({ |
|||
preflight: false, |
|||
}), |
|||
], |
|||
}) |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue