├── templates
    ├── tsx
    │   ├── env.d.ts
    │   ├── src
    │   │   ├── main.ts
    │   │   ├── App.vue
    │   │   └── CustomElement
    │   │   │   ├── index.ts
    │   │   │   └── index.ce.vue
    │   ├── .vscode
    │   │   └── extensions.json
    │   ├── tsconfig.vite-config.json
    │   ├── index.html
    │   ├── tsconfig.json
    │   ├── .gitignore
    │   ├── package.json
    │   ├── vite.config.ts
    │   └── README.md
    ├── ts
    │   ├── .vscode
    │   │   └── extensions.json
    │   ├── src
    │   │   ├── main.ts
    │   │   ├── env.d.ts
    │   │   ├── App.vue
    │   │   └── CustomElement
    │   │   │   ├── index.ts
    │   │   │   └── index.ce.vue
    │   ├── tsconfig.node.json
    │   ├── index.html
    │   ├── .gitignore
    │   ├── package.json
    │   ├── tsconfig.json
    │   ├── vite.config.ts
    │   └── README.md
    ├── js
    │   ├── src
    │   │   ├── main.js
    │   │   ├── App.vue
    │   │   └── CustomElement
    │   │   │   ├── index.js
    │   │   │   └── index.ce.vue
    │   ├── .vscode
    │   │   └── extensions.json
    │   ├── index.html
    │   ├── package.json
    │   ├── .gitignore
    │   ├── vite.config.js
    │   └── README.md
    └── jsx
    │   ├── src
    │       ├── main.js
    │       ├── App.vue
    │       └── CustomElement
    │       │   ├── index.js
    │       │   └── index.ce.vue
    │   ├── .vscode
    │       └── extensions.json
    │   ├── index.html
    │   ├── package.json
    │   ├── .gitignore
    │   ├── vite.config.js
    │   └── README.md
├── bin
    └── create-custom-element.js
├── .DS_Store
├── .gitignore
├── src
    ├── question
    │   ├── addJSX.ts
    │   ├── addTypeScript.ts
    │   ├── index.ts
    │   └── packageName.ts
    ├── create-app.ts
    └── cli.ts
├── README.md
├── tsconfig.json
└── package.json


/templates/tsx/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/bin/create-custom-element.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | import './../lib/cli.js'


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FliPPeDround/create-custom-element/HEAD/.DS_Store


--------------------------------------------------------------------------------
/templates/ts/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | types
3 | lib
4 | .DS_Store
5 | package-lock.json
6 | 
7 | pnpm-lock.yaml
8 | 
9 | 


--------------------------------------------------------------------------------
/templates/js/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/templates/jsx/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/templates/ts/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/templates/tsx/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/templates/js/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/templates/jsx/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/templates/tsx/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/question/addJSX.ts:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   return {
3 |     type: "confirm",
4 |     name: "addJSX",
5 |     default: false,
6 |     message: "Add JSX Support?"
7 |   }
8 | }


--------------------------------------------------------------------------------
/src/question/addTypeScript.ts:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   return {
3 |     type: "confirm",
4 |     name: "addTypeScript",
5 |     default: false,
6 |     message: "Add TypeScript?"
7 |   }
8 | }


--------------------------------------------------------------------------------
/templates/ts/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/templates/tsx/tsconfig.vite-config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node", "vitest"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align=center>create custom element</h1>
 2 | 
 3 | A tool help creating your CustomElements templates power by Vue.
 4 | 
 5 | 
 6 | ## Usage
 7 | 
 8 | ```shell
 9 | npm init custom-element
10 | yarn create custom-element
11 | pnpm create custom-element
12 | ```
13 | 


--------------------------------------------------------------------------------
/templates/ts/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/src/question/index.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import inquirer from 'inquirer'
 3 | import packageName from './packageName.js'
 4 | import addTypeScript from './addTypeScript.js'
 5 | import addJSX from './addJSX.js'
 6 | 
 7 | export default () => {
 8 |   return inquirer.prompt([
 9 |     packageName(),
10 |     addTypeScript(),
11 |     addJSX()
12 |   ])
13 | }


--------------------------------------------------------------------------------
/templates/js/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { register } from './CustomElement';
 3 | register('dart-element')
 4 | </script>
 5 | 
 6 | <template>
 7 |   <dart-element></dart-element>
 8 | </template>
 9 | 
10 | <style>
11 | #app {
12 |   height: 100vh;
13 |   display: flex;
14 |   justify-content: center;
15 |   align-items: center;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/templates/jsx/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { register } from './CustomElement';
 3 | register('dart-element')
 4 | </script>
 5 | 
 6 | <template>
 7 |   <dart-element></dart-element>
 8 | </template>
 9 | 
10 | <style>
11 | #app {
12 |   height: 100vh;
13 |   display: flex;
14 |   justify-content: center;
15 |   align-items: center;
16 | }
17 | </style>


--------------------------------------------------------------------------------
/templates/js/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/templates/jsx/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/templates/ts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.ts"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/templates/tsx/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite App</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.ts"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/templates/ts/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { register } from './CustomElement';
 3 | register('dart-element')
 4 | </script>
 5 | 
 6 | <template>
 7 |   <dart-element></dart-element>
 8 | </template>
 9 | 
10 | <style>
11 | #app {
12 |   height: 100vh;
13 |   display: flex;
14 |   justify-content: center;
15 |   align-items: center;
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/templates/tsx/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { register } from './CustomElement';
 3 | register('dart-element')
 4 | </script>
 5 | 
 6 | <template>
 7 |   <dart-element></dart-element>
 8 | </template>
 9 | 
10 | <style>
11 | #app {
12 |   height: 100vh;
13 |   display: flex;
14 |   justify-content: center;
15 |   align-items: center;
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/templates/tsx/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "compilerOptions": {
 5 |     "baseUrl": ".",
 6 |     "paths": {
 7 |       "@/*": ["./src/*"]
 8 |     }
 9 |   },
10 | 
11 |   "references": [
12 |     {
13 |       "path": "./tsconfig.vite-config.json"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/templates/js/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-project",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "preview": "vite preview --port 5050"
 8 |   },
 9 |   "dependencies": {
10 |     "vue": "^3.2.31"
11 |   },
12 |   "devDependencies": {
13 |     "@vitejs/plugin-vue": "^2.2.2",
14 |     "vite": "^2.8.4"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/templates/ts/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"module": "ESNext",
 4 | 		"target": "ESNext",
 5 | 		"moduleResolution": "node",
 6 | 		"allowSyntheticDefaultImports": true,
 7 | 		"esModuleInterop": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"outDir": "lib",
10 | 		"declaration": true,
11 | 		"skipLibCheck": true,
12 | 		"strict": true,
13 | 		"declarationDir": "types"
14 | 	},
15 | 	"include": ["src/**/*"]
16 | }


--------------------------------------------------------------------------------
/templates/jsx/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-project",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "preview": "vite preview --port 5050"
 8 |   },
 9 |   "dependencies": {
10 |     "vue": "^3.2.31"
11 |   },
12 |   "devDependencies": {
13 |     "@vitejs/plugin-vue": "^2.2.2",
14 |     "@vitejs/plugin-vue-jsx": "^1.3.7",
15 |     "vite": "^2.8.4"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/templates/js/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/templates/jsx/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/templates/tsx/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/templates/ts/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "custom-element",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vue-tsc --noEmit && vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^3.2.25"
12 |   },
13 |   "devDependencies": {
14 |     "@vitejs/plugin-vue": "^2.2.0",
15 |     "typescript": "^4.5.4",
16 |     "vite": "^2.8.0",
17 |     "vue-tsc": "^0.29.8"
18 |   }
19 | }


--------------------------------------------------------------------------------
/templates/js/src/CustomElement/index.js:
--------------------------------------------------------------------------------
 1 | import { defineCustomElement } from 'vue'
 2 | import VueDarkModeSwitch from './index.ce.vue'
 3 | 
 4 | // Vue generates a new HTML element class from the component definition.
 5 | export const DarkModeSwitch = defineCustomElement(VueDarkModeSwitch)
 6 | 
 7 | // Register the custom element so that it can be used as <dark-mode-switch>.
 8 | export function register (tagName = 'dark-mode-switch') {
 9 |   customElements.define(tagName, DarkModeSwitch)
10 | }


--------------------------------------------------------------------------------
/templates/jsx/src/CustomElement/index.js:
--------------------------------------------------------------------------------
 1 | import { defineCustomElement } from 'vue'
 2 | import VueDarkModeSwitch from './index.ce.vue'
 3 | 
 4 | // Vue generates a new HTML element class from the component definition.
 5 | export const DarkModeSwitch = defineCustomElement(VueDarkModeSwitch)
 6 | 
 7 | // Register the custom element so that it can be used as <dark-mode-switch>.
 8 | export function register (tagName = 'dark-mode-switch') {
 9 |   customElements.define(tagName, DarkModeSwitch)
10 | }


--------------------------------------------------------------------------------
/templates/ts/src/CustomElement/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineCustomElement } from 'vue'
 2 | import VueDarkModeSwitch from './index.ce.vue'
 3 | 
 4 | // Vue generates a new HTML element class from the component definition.
 5 | export const DarkModeSwitch = defineCustomElement(VueDarkModeSwitch)
 6 | 
 7 | // Register the custom element so that it can be used as <dark-mode-switch>.
 8 | export function register (tagName: string = 'dark-mode-switch') {
 9 |   customElements.define(tagName, DarkModeSwitch)
10 | }


--------------------------------------------------------------------------------
/templates/tsx/src/CustomElement/index.ts:
--------------------------------------------------------------------------------
 1 | import { defineCustomElement } from 'vue'
 2 | import VueDarkModeSwitch from './index.ce.vue'
 3 | 
 4 | // Vue generates a new HTML element class from the component definition.
 5 | export const DarkModeSwitch = defineCustomElement(VueDarkModeSwitch)
 6 | 
 7 | // Register the custom element so that it can be used as <dark-mode-switch>.
 8 | export function register (tagName:string = 'dark-mode-switch') {
 9 |   customElements.define(tagName, DarkModeSwitch)
10 | }


--------------------------------------------------------------------------------
/templates/ts/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "lib": ["esnext", "dom"]
13 |   },
14 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
15 |   "references": [{ "path": "./tsconfig.node.json" }]
16 | }
17 | 


--------------------------------------------------------------------------------
/templates/js/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [vue({
 6 |     template: {
 7 |       compilerOptions: {
 8 |         isCustomElement: (tag) => tag.includes('-')
 9 |       }
10 |     }
11 |   })],
12 |   build: {
13 |     target: 'esnext',
14 |     minify: 'terser',
15 |     lib: {
16 |       entry: 'src/CustomElement',
17 |       formats: ['es', 'cjs', 'iife'],
18 |       name: 'CustomElement'
19 |     }
20 |   }
21 | })
22 | 
23 | 


--------------------------------------------------------------------------------
/templates/ts/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | 
 4 | export default defineConfig({
 5 |   plugins: [vue({
 6 |     template: {
 7 |       compilerOptions: {
 8 |         isCustomElement: (tag: string[]) => tag.includes('-')
 9 |       }
10 |     }
11 |   })],
12 |   build: {
13 |     target: 'esnext',
14 |     minify: 'terser',
15 |     lib: {
16 |       entry: 'src/CustomElement/index.ts',
17 |       formats: ['es', 'cjs', 'iife'],
18 |       name: 'CustomElement'
19 |     }
20 |   }
21 | })
22 | 


--------------------------------------------------------------------------------
/src/question/packageName.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import fs from 'fs'
 3 | 
 4 | export default () => {
 5 |   return {
 6 |     type: "input",
 7 |     name: "ProjectName",
 8 |     default: 'custom-element',
 9 |     message: "Project name:",
10 |     validate(value: string) {
11 |       const cwd = process.cwd()
12 |       const targetPath = path.join(cwd, value)
13 |       const isTemplateExit = fs.existsSync(targetPath)
14 |       if (!isTemplateExit) {return true}
15 |       return `Target directory "${value}" is exist. please enter again and continue`
16 |     }
17 |   }
18 | }


--------------------------------------------------------------------------------
/templates/tsx/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-project",
 3 |   "version": "0.0.0",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vue-tsc --noEmit && vite build",
 7 |     "preview": "vite preview --port 5050",
 8 |     "typecheck": "vue-tsc --noEmit"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^3.2.31"
12 |   },
13 |   "devDependencies": {
14 |     "@types/node": "^16.11.25",
15 |     "@vitejs/plugin-vue": "^2.2.2",
16 |     "@vitejs/plugin-vue-jsx": "^1.3.7",
17 |     "@vue/tsconfig": "^0.1.3",
18 |     "typescript": "~4.5.5",
19 |     "vite": "^2.8.4",
20 |     "vue-tsc": "^0.31.4"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/templates/jsx/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import vueJsx from '@vitejs/plugin-vue-jsx'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     vue({
 8 |       template: {
 9 |         compilerOptions: {
10 |           isCustomElement: (tag) => tag.includes('-')
11 |         }
12 |       }
13 |     }), 
14 |     vueJsx()],
15 |   build: {
16 |     target: 'esnext',
17 |     minify: 'terser',
18 |     lib: {
19 |       entry: 'src/CustomElement/index',
20 |       formats: ['es', 'cjs', 'iife'],
21 |       name: 'CustomElement'
22 |     }
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/templates/tsx/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import vueJsx from '@vitejs/plugin-vue-jsx'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     vue({
 8 |       template: {
 9 |         compilerOptions: {
10 |           isCustomElement: (tag: string) => tag.includes('-')
11 |         }
12 |       }
13 |     }), 
14 |     vueJsx()],
15 |   build: {
16 |     target: 'esnext',
17 |     minify: 'terser',
18 |     lib: {
19 |       entry: 'src/CustomElement/index',
20 |       formats: ['es', 'cjs', 'iife'],
21 |       name: 'CustomElement'
22 |     }
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/templates/js/README.md:
--------------------------------------------------------------------------------
 1 | # vue-project
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Customize configuration
10 | 
11 | See [Vite Configuration Reference](https://vitejs.dev/config/).
12 | 
13 | ## Project Setup
14 | 
15 | ```sh
16 | pnpm install
17 | ```
18 | 
19 | ### Compile and Hot-Reload for Development
20 | 
21 | ```sh
22 | pnpm dev
23 | ```
24 | 
25 | ### Compile and Minify for Production
26 | 
27 | ```sh
28 | pnpm build
29 | ```
30 | 


--------------------------------------------------------------------------------
/templates/jsx/README.md:
--------------------------------------------------------------------------------
 1 | # vue-project
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Customize configuration
10 | 
11 | See [Vite Configuration Reference](https://vitejs.dev/config/).
12 | 
13 | ## Project Setup
14 | 
15 | ```sh
16 | pnpm install
17 | ```
18 | 
19 | ### Compile and Hot-Reload for Development
20 | 
21 | ```sh
22 | pnpm dev
23 | ```
24 | 
25 | ### Compile and Minify for Production
26 | 
27 | ```sh
28 | pnpm build
29 | ```
30 | 


--------------------------------------------------------------------------------
/templates/ts/README.md:
--------------------------------------------------------------------------------
 1 | # Vue 3 + Typescript + Vite
 2 | 
 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | - [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
 8 | 
 9 | ## Type Support For `.vue` Imports in TS
10 | 
11 | Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-custom-element",
 3 |   "version": "0.0.6",
 4 |   "description": "A tool help creating your CustomElement by Vue.",
 5 |   "main": "lib/index.js",
 6 |   "type": "module",
 7 |   "files": [
 8 |     "lib",
 9 |     "bin",
10 |     "templates"
11 |   ],
12 |   "bin": {
13 |     "create-custom-element": "bin/create-custom-element.js"
14 |   },
15 |   "scripts": {
16 |     "build": "tsc",
17 |     "test": "npm run build && node ./bin/create-custom-element.js",
18 |     "dev": "tsc -w"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/FliPPeDround/create-custom-element.git"
23 |   },
24 |   "keywords": [
25 |     "web",
26 |     "componet",
27 |     "vue"
28 |   ],
29 |   "author": "Peng Joy",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/FliPPeDround/create-custom-element/issues"
33 |   },
34 |   "homepage": "https://github.com/FliPPeDround/create-custom-element#readme",
35 |   "dependencies": {
36 |     "chalk": "^5.0.0",
37 |     "inquirer": "^8.2.0"
38 |   },
39 |   "devDependencies": {
40 |     "@types/inquirer": "^8.2.0",
41 |     "@types/node": "^17.0.21",
42 |     "typescript": "^4.5.5"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/templates/js/src/CustomElement/index.ce.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import { ref } from 'vue'
 3 | const isDark = ref(false)
 4 | </script>
 5 | 
 6 | <template>
 7 |   <button @click="isDark = !isDark">
 8 |     <span v-if="isDark">🌙</span>
 9 |     <span v-else>🌞</span>
10 |   </button>
11 | </template>
12 | 
13 | <style>
14 | :host {
15 |   --color: #fbbf24;
16 |   --bg-normal: #fAfAf9;
17 |   --bg-active: #f5f5f4;
18 |   --font-size: 24px;
19 | }
20 | 
21 | button {
22 |   background-color: var(--bg-normal);
23 |   border: none;
24 |   border-radius: .5rem;
25 |   color: var(--color);
26 |   cursor: pointer;
27 |   display: flex;
28 |   font-size: var(--font-size);
29 |   overflow: hidden;
30 |   padding: 0.4em;
31 |   transition: background-color 0.3s ease, color 0.3s cubic-bezier(0.64, 0, 0.78, 0);
32 | }
33 | 
34 | button:hover,
35 | button:focus {
36 |   background-color: var(--bg-active);
37 |   outline: none;
38 | }
39 | 
40 | .slide-enter-active,
41 | .slide-leave-active {
42 |   transition: transform 0.3s ease-out;
43 | }
44 | 
45 | .slide-enter-from {
46 |   transform: translateY(-150%);
47 | }
48 | 
49 | .slide-enter-to,
50 | .slide-leave-from {
51 |   transform: translateY(0);
52 | }
53 | 
54 | .slide-leave-to {
55 |   transform: translateY(150%);
56 | }
57 | </style>


--------------------------------------------------------------------------------
/templates/ts/src/CustomElement/index.ce.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | import { ref } from 'vue'
 3 | const isDark = ref(false)
 4 | </script>
 5 | 
 6 | <template>
 7 |   <button @click="isDark = !isDark">
 8 |     <span v-if="isDark">🌙</span>
 9 |     <span v-else>🌞</span>
10 |   </button>
11 | </template>
12 | 
13 | <style>
14 | :host {
15 |   --color: #fbbf24;
16 |   --bg-normal: #fAfAf9;
17 |   --bg-active: #f5f5f4;
18 |   --font-size: 24px;
19 | }
20 | 
21 | :host([dark]) {
22 |   --color: #fef3c7;
23 |   --bg-normal: #262626;
24 |   --bg-active: #2d2d2d;
25 | }
26 | 
27 | button {
28 |   background-color: var(--bg-normal);
29 |   border: none;
30 |   border-radius: .5rem;
31 |   color: var(--color);
32 |   cursor: pointer;
33 |   display: flex;
34 |   font-size: var(--font-size);
35 |   overflow: hidden;
36 |   padding: 0.4em;
37 |   transition: background-color 0.3s ease, color 0.3s cubic-bezier(0.64, 0, 0.78, 0);
38 | }
39 | 
40 | button:hover,
41 | button:focus {
42 |   background-color: var(--bg-active);
43 |   outline: none;
44 | }
45 | 
46 | .slide-enter-active,
47 | .slide-leave-active {
48 |   transition: transform 0.3s ease-out;
49 | }
50 | 
51 | .slide-enter-from {
52 |   transform: translateY(-150%);
53 | }
54 | 
55 | .slide-enter-to,
56 | .slide-leave-from {
57 |   transform: translateY(0);
58 | }
59 | 
60 | .slide-leave-to {
61 |   transform: translateY(150%);
62 | }
63 | </style>


--------------------------------------------------------------------------------
/templates/jsx/src/CustomElement/index.ce.vue:
--------------------------------------------------------------------------------
 1 | <script lang='jsx'>
 2 | import { defineComponent, ref } from 'vue'
 3 | 
 4 | export default defineComponent({
 5 |   setup () {
 6 |     const isDart = ref(true)
 7 |     const changeDart = () => {
 8 |       isDart.value = !isDart.value
 9 |     }
10 |     return () => (
11 |       <button onClick = { changeDart }>
12 |         { isDart.value ? <span>🌙</span> : <span>🌞</span> }
13 |       </button>
14 |     )
15 |   }
16 | })
17 | </script>
18 | 
19 | <style>
20 | :host {
21 |   --color: #fbbf24;
22 |   --bg-normal: #fAfAf9;
23 |   --bg-active: #f5f5f4;
24 |   --font-size: 24px;
25 | }
26 | 
27 | button {
28 |   background-color: var(--bg-normal);
29 |   border: none;
30 |   border-radius: .5rem;
31 |   color: var(--color);
32 |   cursor: pointer;
33 |   display: flex;
34 |   font-size: var(--font-size);
35 |   overflow: hidden;
36 |   padding: 0.4em;
37 |   transition: background-color 0.3s ease, color 0.3s cubic-bezier(0.64, 0, 0.78, 0);
38 | }
39 | 
40 | button:hover,
41 | button:focus {
42 |   background-color: var(--bg-active);
43 |   outline: none;
44 | }
45 | 
46 | .slide-enter-active,
47 | .slide-leave-active {
48 |   transition: transform 0.3s ease-out;
49 | }
50 | 
51 | .slide-enter-from {
52 |   transform: translateY(-150%);
53 | }
54 | 
55 | .slide-enter-to,
56 | .slide-leave-from {
57 |   transform: translateY(0);
58 | }
59 | 
60 | .slide-leave-to {
61 |   transform: translateY(150%);
62 | }
63 | </style>


--------------------------------------------------------------------------------
/templates/tsx/src/CustomElement/index.ce.vue:
--------------------------------------------------------------------------------
 1 | <script lang='tsx'>
 2 | import { defineComponent, ref } from 'vue'
 3 | 
 4 | export default defineComponent({
 5 |   setup () {
 6 |     const isDart = ref(true)
 7 |     const changeDart = () => {
 8 |       isDart.value = !isDart.value
 9 |     }
10 |     return () => (
11 |       <button onClick = { changeDart }>
12 |         { isDart.value ? <span>🌙</span> : <span>🌞</span> }
13 |       </button>
14 |     )
15 |   }
16 | })
17 | </script>
18 | 
19 | <style>
20 | :host {
21 |   --color: #fbbf24;
22 |   --bg-normal: #fAfAf9;
23 |   --bg-active: #f5f5f4;
24 |   --font-size: 24px;
25 | }
26 | 
27 | button {
28 |   background-color: var(--bg-normal);
29 |   border: none;
30 |   border-radius: .5rem;
31 |   color: var(--color);
32 |   cursor: pointer;
33 |   display: flex;
34 |   font-size: var(--font-size);
35 |   overflow: hidden;
36 |   padding: 0.4em;
37 |   transition: background-color 0.3s ease, color 0.3s cubic-bezier(0.64, 0, 0.78, 0);
38 | }
39 | 
40 | button:hover,
41 | button:focus {
42 |   background-color: var(--bg-active);
43 |   outline: none;
44 | }
45 | 
46 | .slide-enter-active,
47 | .slide-leave-active {
48 |   transition: transform 0.3s ease-out;
49 | }
50 | 
51 | .slide-enter-from {
52 |   transform: translateY(-150%);
53 | }
54 | 
55 | .slide-enter-to,
56 | .slide-leave-from {
57 |   transform: translateY(0);
58 | }
59 | 
60 | .slide-leave-to {
61 |   transform: translateY(150%);
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/create-app.ts:
--------------------------------------------------------------------------------
 1 | import fs from 'fs'
 2 | import path from 'path'
 3 | import { fileURLToPath } from 'url'
 4 | 
 5 | const __dirname = fileURLToPath(import.meta.url)
 6 | const templatesDir = path.join(__dirname, '../../', "templates")
 7 | 
 8 | export function createApp(
 9 |   template: string,
10 |   targetPath: string,
11 |   libName?: string
12 | ) {
13 |   const templateDir = path.join(templatesDir, template)
14 |   const isTemplateExit = fs.existsSync(templateDir)
15 |   if (!isTemplateExit) {
16 |     throw `Can't find template`
17 |   }
18 | 
19 |   copy(templateDir, targetPath)
20 | 
21 |   if (libName) {
22 | 		const pkgJsonPath = path.join(targetPath, "package.json")
23 | 		const pkgJson = fs.readFileSync(pkgJsonPath, {encoding: "utf8"})
24 | 
25 |     function replacer(key: string, value: any) {
26 |       if (key === "name") {
27 |         return libName
28 |       }
29 |       return value;
30 |     }
31 | 
32 |     const newPackage = JSON.stringify(JSON.parse(pkgJson),replacer,2)
33 |     fs.writeFileSync(pkgJsonPath, newPackage, 'utf8')
34 | 	}
35 | }
36 | 
37 | function copy(src: string, dest: string) {
38 |   const stat = fs.statSync(src)
39 |   if (stat.isDirectory()) {
40 |     copyDir(src, dest)
41 |   } else {
42 |     fs.copyFileSync(src, dest)
43 |   }
44 | }
45 | 
46 | function copyDir(srcDir: string, destDir: string) {
47 |   fs.mkdirSync(destDir, { recursive: true })
48 |   for (const file of fs.readdirSync(srcDir)) {
49 |     const srcFile = path.resolve(srcDir, file)
50 |     const destFile = path.resolve(destDir, file)
51 |     copy(srcFile, destFile)
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/templates/tsx/README.md:
--------------------------------------------------------------------------------
 1 | # vue-project
 2 | 
 3 | This template should help get you started developing with Vue 3 in Vite.
 4 | 
 5 | ## Recommended IDE Setup
 6 | 
 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
 8 | 
 9 | ## Type Support for `.vue` Imports in TS
10 | 
11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12 | 
13 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14 | 
15 | 1. Disable the built-in TypeScript Extension
16 |     1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17 |     2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19 | 
20 | ## Customize configuration
21 | 
22 | See [Vite Configuration Reference](https://vitejs.dev/config/).
23 | 
24 | ## Project Setup
25 | 
26 | ```sh
27 | pnpm install
28 | ```
29 | 
30 | ### Compile and Hot-Reload for Development
31 | 
32 | ```sh
33 | pnpm dev
34 | ```
35 | 
36 | ### Type-Check, Compile and Minify for Production
37 | 
38 | ```sh
39 | pnpm build
40 | ```
41 | 


--------------------------------------------------------------------------------
/src/cli.ts:
--------------------------------------------------------------------------------
 1 | // import { createApp } from './create-app'
 2 | import chalk from 'chalk'
 3 | import path from 'path'
 4 | import fs from 'fs'
 5 | import { fileURLToPath } from 'url'
 6 | import { createApp } from './create-app.js'
 7 | import questions from './question/index.js'
 8 | 
 9 | const __dirname = fileURLToPath(import.meta.url)
10 | 
11 | try {
12 |   const p = path.join(__dirname,"../../package.json")
13 |   const pkg = JSON.parse(fs.readFileSync(p, {encoding: "utf8"}))
14 |   console.log(`create-custom-element ${chalk.cyanBright('v'+pkg.version)}`)
15 | } catch (e) {
16 |   console.error(e)
17 | }
18 | 
19 | const answers = await questions()
20 | 
21 | const cwd = process.cwd()
22 | const targetPath = path.join(cwd, answers.ProjectName)
23 | 
24 | const template = answers.addTypeScript ? (answers.addJSX ? 'tsx' : 'ts') : (answers.addJSX ? 'jsx' : 'js')
25 | 
26 | createApp(template, targetPath, answers.ProjectName)
27 | 
28 | const userAgent = process.env.npm_config_user_agent ?? ''
29 | const packageManager = /pnpm/.test(userAgent) ? 'pnpm' : /yarn/.test(userAgent) ? 'yarn' : 'npm'
30 | 
31 | console.log(`You are creating ${chalk.greenBright(answers.ProjectName)}.`)
32 | console.log('\nDone. Now run:\n')
33 | switch(packageManager)
34 | {
35 |     case 'npm':
36 |       {
37 |         console.log(chalk.green(`  cd ${answers.ProjectName}`))
38 |         console.log(chalk.green('  npm install'))
39 |         console.log(chalk.green('  npm run dev'))
40 |       }
41 |         break
42 |     case 'yarn':
43 |       {
44 |         console.log(chalk.green(`  cd ${answers.ProjectName}`))
45 |         console.log(chalk.green('  yarn'))
46 |         console.log(chalk.green('  yarn dev'))
47 |       }
48 |         break;
49 |     case 'pnpm':
50 |       {
51 |         console.log(chalk.green(`  cd ${answers.ProjectName}`))
52 |         console.log(chalk.green('  pnpm install'))
53 |         console.log(chalk.green('  pnpm dev'))
54 |       }
55 |         break;
56 |     default:
57 |       {
58 |         console.log(chalk.green(`  cd ${answers.ProjectName}`))
59 |         console.log(chalk.green('  npm install'))
60 |         console.log(chalk.green('  npm run dev'))
61 |       }
62 | }
63 | console.log()
64 | 


--------------------------------------------------------------------------------