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