Skip to content

Commit c6089cc

Browse files
committed
🎉 (template) init from vue-composable-starter
0 parents  commit c6089cc

12 files changed

+4696
-0
lines changed

.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Library
2+
node_modules
3+
yarn-error.log
4+
dist
5+
# OS
6+
.DS_Store

.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all",
4+
"semi": false,
5+
"arrowParens": "always"
6+
}

LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2020 Yaël GUILLOUX <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# 🪝 vue-composable-starter
2+
3+
A minimalist starting point for your next Vue composable.
4+
5+
- 🧩 TypeScript by default
6+
- 🏋️‍♀️ Vue as peer dependency (minimal bundle size)
7+
- 🤟 Vue 2 & 3 support using [vue-demi](https://github.com/antfu/vue-demi)
8+
- 🤹 Testing using [Jest](https://jestjs.io)
9+
- 🏎 Edit variables, implement, test, publish
10+
11+
## Commands
12+
13+
Build the package:
14+
15+
```bash
16+
yarn build
17+
```
18+
19+
Build with watcher:
20+
21+
```bash
22+
yarn watch
23+
```
24+
25+
Lint the package:
26+
27+
```bash
28+
yarn link
29+
```
30+
31+
Run test suite:
32+
33+
```bash
34+
yarn test
35+
```
36+
37+
Test typings:
38+
39+
```bash
40+
yarn test:types
41+
```
42+
43+
## To-Do
44+
45+
- [ ] Edit package.json `name`, `description`, `repository` and `author` keys.
46+
- [ ] Edit README.md
47+
- [ ] Implement my composable
48+
- [ ] Test my composable
49+
- [ ] Document
50+
- [ ] Publish on [NPM](npmjs.com), [awesome-vue](https://github.com/vuejs/awesome-vue), [vue-forum](https://forum.vuejs.org/), [Vue Discord](https://fr.vuejs.org/v2/guide/join.html).
51+
52+
## Contributing
53+
54+
You are more than welcome to improve this starter template.
55+
56+
Just submit your changes via pull request and I will review them before merging.
57+
58+
If you are making a fix on the template, you can use the `main` branch and send a pull request.
59+
60+
If you are adding a new features, please create a new branch with a name describing your feature (`my-new-feature`), push to your branch and then submit a pull request.

jest.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
globals: {
4+
__DEV__: true,
5+
__BROWSER__: true,
6+
'ts-jest': {
7+
diagnostics: {
8+
warnOnly: true,
9+
},
10+
},
11+
},
12+
testURL: 'http://localhost/',
13+
}

package.json

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "vue-composable-starter",
3+
"version": "1.0.0",
4+
"description": "🪝🪝 The next big hook",
5+
"repository": "https://github.com/Tahul/vue-composable-starter",
6+
"bugs": {
7+
"url": "https://github.com/Tahul/vue-composable-starter/issues"
8+
},
9+
"homepage": "https://github.com/Tahul/vue-composable-starter#readme",
10+
"author": "Yaël GUILLOUX <[email protected]>",
11+
"license": "MIT",
12+
"keywords": [
13+
"vue",
14+
"hook"
15+
],
16+
"main": "dist/index.cjs.js",
17+
"module": "dist/index.esm-bundler.js",
18+
"unpkg": "dist/index.global.js",
19+
"jsdelivr": "dist/index.global.js",
20+
"types": "dist/src/index.d.ts",
21+
"scripts": {
22+
"build": "rollup -c rollup.config.js",
23+
"dev": "rollup -w -c rollup.config.js",
24+
"lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
25+
"lint:fix": "yarn run lint --write",
26+
"test:types": "tsc --build tsconfig.json",
27+
"test:unit": "jest",
28+
"test": "yarn run test:types && yarn run test:unit"
29+
},
30+
"files": [
31+
"dist/**/*",
32+
"LICENSE",
33+
"README.md"
34+
],
35+
"dependencies": {
36+
"vue-demi": "^0.5.3"
37+
},
38+
"peerDependencies": {
39+
"@vue/composition-api": "^1.0.0-beta.1",
40+
"vue": "^2.0.0 || >=3.0.0-rc.0"
41+
},
42+
"devDependencies": {
43+
"@rollup/plugin-commonjs": "^17.0.0",
44+
"@rollup/plugin-node-resolve": "^11.0.1",
45+
"@rollup/plugin-replace": "^2.3.4",
46+
"@types/jest": "^26.0.19",
47+
"@vue/test-utils": "^2.0.0-beta.13",
48+
"jest": "^26.6.3",
49+
"lint-staged": "^10.5.3",
50+
"pascalcase": "^1.0.0",
51+
"prettier": "^2.2.1",
52+
"rollup": "^2.35.1",
53+
"rollup-plugin-terser": "^7.0.2",
54+
"rollup-plugin-typescript2": "^0.29.0",
55+
"ts-jest": "^26.4.4",
56+
"typescript": "^4.1.3",
57+
"vue": "^3.0.4",
58+
"yorkie": "^2.0.0"
59+
},
60+
"gitHooks": {
61+
"pre-commit": "lint-staged"
62+
},
63+
"lint-staged": {
64+
"*.js": [
65+
"prettier --write"
66+
],
67+
"*.ts?(x)": [
68+
"prettier --parser=typescript --write"
69+
]
70+
}
71+
}

rollup.config.js

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
// @ts-nocheck - Disable TypeScript checks here
2+
import path from 'path'
3+
import ts from 'rollup-plugin-typescript2'
4+
import replace from '@rollup/plugin-replace'
5+
import resolve from '@rollup/plugin-node-resolve'
6+
import commonjs from '@rollup/plugin-commonjs'
7+
import pascalcase from 'pascalcase'
8+
9+
const pkg = require('./package.json')
10+
const name = pkg.name
11+
12+
const getAuthors = (pkg) => {
13+
const { contributors, author } = pkg
14+
15+
const authors = new Set()
16+
if (contributors && contributors)
17+
contributors.forEach((contributor) => {
18+
authors.add(contributor.name)
19+
})
20+
if (author) authors.add(author.name)
21+
22+
return Array.from(authors).join(', ')
23+
}
24+
25+
const banner = `/*!
26+
* ${pkg.name} v${pkg.version}
27+
* (c) ${new Date().getFullYear()} ${getAuthors(pkg)}
28+
* @license MIT
29+
*/`
30+
31+
// ensure TS checks only once for each build
32+
let hasTSChecked = false
33+
34+
const outputConfigs = {
35+
'esm-bundler': {
36+
file: pkg.module,
37+
format: `es`,
38+
},
39+
cjs: {
40+
file: pkg.main,
41+
format: `cjs`,
42+
},
43+
global: {
44+
file: pkg.unpkg,
45+
format: `iife`,
46+
},
47+
esm: {
48+
file: pkg.module.replace('-bundler.js', '-browser.js'),
49+
format: `es`,
50+
},
51+
}
52+
53+
const createConfig = (format, output, plugins = []) => {
54+
if (!output) {
55+
console.log(require('chalk').yellow(`invalid format: "${format}"`))
56+
process.exit(1)
57+
}
58+
59+
output.sourcemap = !!process.env.SOURCE_MAP
60+
output.banner = banner
61+
output.externalLiveBindings = false
62+
output.globals = { vue: 'Vue' }
63+
output.exports = 'auto'
64+
65+
const isProductionBuild = /\.prod\.js$/.test(output.file)
66+
const isGlobalBuild = format === 'global'
67+
const isRawESMBuild = format === 'esm'
68+
const isNodeBuild = format === 'cjs'
69+
const isBundlerESMBuild = /esm-bundler/.test(format)
70+
71+
if (isGlobalBuild) output.name = pascalcase(pkg.name)
72+
73+
const shouldEmitDeclarations = !hasTSChecked
74+
75+
const tsPlugin = ts({
76+
check: !hasTSChecked,
77+
tsconfig: path.resolve(__dirname, 'tsconfig.json'),
78+
cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
79+
tsconfigOverride: {
80+
compilerOptions: {
81+
sourceMap: output.sourcemap,
82+
declaration: shouldEmitDeclarations,
83+
declarationMap: shouldEmitDeclarations,
84+
},
85+
exclude: ['tests'],
86+
},
87+
})
88+
89+
// we only need to check TS and generate declarations once for each build.
90+
// it also seems to run into weird issues when checking multiple times
91+
// during a single build.
92+
hasTSChecked = true
93+
94+
const external = ['vue']
95+
96+
const nodePlugins = [resolve(), commonjs()]
97+
98+
return {
99+
input: `src/index.ts`,
100+
// Global and Browser ESM builds inlines everything so that they can be
101+
// used alone.
102+
external,
103+
plugins: [
104+
tsPlugin,
105+
createReplacePlugin(
106+
isProductionBuild,
107+
isBundlerESMBuild,
108+
isGlobalBuild || isRawESMBuild || isBundlerESMBuild,
109+
isGlobalBuild,
110+
isNodeBuild,
111+
),
112+
...nodePlugins,
113+
...plugins,
114+
],
115+
output,
116+
}
117+
}
118+
119+
const createReplacePlugin = (
120+
isProduction,
121+
isBundlerESMBuild,
122+
isBrowserBuild,
123+
isGlobalBuild,
124+
isNodeBuild,
125+
) => {
126+
const replacements = {
127+
__COMMIT__: `"${process.env.COMMIT}"`,
128+
__VERSION__: `"${pkg.version}"`,
129+
__DEV__: isBundlerESMBuild
130+
? // preserve to be handled by bundlers
131+
`(process.env.NODE_ENV !== 'production')`
132+
: // hard coded dev/prod builds
133+
!isProduction,
134+
// this is only used during tests
135+
__TEST__: isBundlerESMBuild ? `(process.env.NODE_ENV === 'test')` : false,
136+
// If the build is expected to run directly in the browser (global / esm builds)
137+
__BROWSER__: isBrowserBuild,
138+
// is targeting bundlers?
139+
__BUNDLER__: isBundlerESMBuild,
140+
__GLOBAL__: isGlobalBuild,
141+
// is targeting Node (SSR)?
142+
__NODE_JS__: isNodeBuild,
143+
}
144+
145+
// allow inline overrides like
146+
//__RUNTIME_COMPILE__=true yarn build
147+
Object.keys(replacements).forEach((key) => {
148+
if (key in process.env) {
149+
replacements[key] = process.env[key]
150+
}
151+
})
152+
153+
return replace(replacements)
154+
}
155+
156+
const createMinifiedConfig = (format) => {
157+
const { terser } = require('rollup-plugin-terser')
158+
159+
return createConfig(
160+
format,
161+
{
162+
file: `dist/index.${format}.prod.js`,
163+
format: outputConfigs[format].format,
164+
},
165+
[
166+
terser({
167+
module: /^esm/.test(format),
168+
compress: {
169+
ecma: 2015,
170+
pure_getters: true,
171+
},
172+
}),
173+
],
174+
)
175+
}
176+
177+
const allFormats = Object.keys(outputConfigs)
178+
const packageFormats = allFormats
179+
const packageConfigs = packageFormats.map((format) =>
180+
createConfig(format, outputConfigs[format]),
181+
)
182+
183+
// only add the production ready if we are bundling the options
184+
packageFormats.forEach((format) => {
185+
if (format === 'global') {
186+
packageConfigs.push(createMinifiedConfig(format))
187+
}
188+
})
189+
190+
export default packageConfigs

src/global.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Global compile-time constants
2+
declare var __DEV__: boolean
3+
declare var __BROWSER__: boolean
4+
declare var __CI__: boolean

src/index.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { ref } from 'vue-demi'
2+
3+
/**
4+
* A simple toggler.
5+
*
6+
* @param [defaultValue=false]
7+
*/
8+
const useToggle = (defaultValue: boolean = false) => {
9+
const toggleable = ref(defaultValue)
10+
11+
const toggle = () => (toggleable.value = !toggleable.value)
12+
13+
return [toggleable, toggle] as const
14+
}
15+
16+
export default useToggle

0 commit comments

Comments
 (0)