commit 21c42f3950cdfa263be5a43dbc5a0c69eb3b9f6a Author: Mason Payne Date: Sat Feb 22 23:58:47 2025 -0700 create script for generating a vue plugin or library diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..b34910e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vue-plugin-setup.iml b/.idea/vue-plugin-setup.iml new file mode 100644 index 0000000..5e764c4 --- /dev/null +++ b/.idea/vue-plugin-setup.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/setup-vue-library.sh b/setup-vue-library.sh new file mode 100644 index 0000000..7f172e2 --- /dev/null +++ b/setup-vue-library.sh @@ -0,0 +1,167 @@ +#!/bin/bash +# This script sets up a Vue 3 + TypeScript library project ready for development +# and eventual building & publishing of your distributable component(s). + +# 1. Create your project folder. +read -p "Enter your project folder name: " project_folder +mkdir "$project_folder" +cd "$project_folder" || exit + +# 2. Initialize a new npm package. +npm init -y + +# 3. Install needed dependencies. +# - vue: The Vue framework (we install version 3) +# - typescript: For TS support +# - vite and @vitejs/plugin-vue: For development and build tooling +npm install vue@3 +npm install -D typescript vite @vitejs/plugin-vue + +# 4. Create the src folder and add a minimal component and entry point. +mkdir src + +# Create a sample Vue component (MyComponent.vue) +cat > src/MyComponent.vue <<'EOF' + + + + + +EOF + +# Create an index entry file that exports your component (or library) +cat > src/index.ts <<'EOF' +import { App, Plugin } from 'vue'; +import MyComponent from './MyComponent.vue'; + +const MyLibrary: Plugin = { + install(app: App) { + app.component('MyComponent', MyComponent); + } +}; + +export { MyComponent }; +export default MyLibrary; +EOF + +# 5. Create a tsconfig.json file for TypeScript configuration. +cat > tsconfig.json <<'EOF' +{ + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "node", + "lib": ["ESNext", "DOM"], + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "declaration": true, + "declarationDir": "dist", + "sourceMap": true, + "resolveJsonModule": true, + "jsx": "preserve" + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"], + "exclude": ["node_modules", "dist"] +} +EOF + +# 6. Set up Vite for library mode by creating vite.config.ts. +cat > vite.config.ts <<'EOF' +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import path from 'path'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], + build: { + lib: { + // Set the entry point for our library + entry: path.resolve(__dirname, 'src/index.ts'), + name: 'MyLibrary', + formats: ['es', 'umd'], + // Customize file names for the dist outputs. + fileName: (format) => \`index.\${format}.js\` + }, + rollupOptions: { + // Ensure vue is treated as an external dependency. + external: ['vue'], + output: { + globals: { + vue: 'Vue' + } + } + } + } +}); +EOF + +# 7. Update package.json using a Node.js script. +# Create update-package.js to modify package.json accordingly. +cat > update-package.js <<'EOF' +const fs = require('fs'); + +const pkgFile = 'package.json'; +const pkg = JSON.parse(fs.readFileSync(pkgFile, {encoding: 'utf-8'})); + +// Update package.json fields needed for a distributable library. +pkg.main = 'dist/index.umd.js'; +pkg.module = 'dist/index.es.js'; +pkg.types = 'dist/index.d.ts'; +pkg.files = ['dist']; +pkg.scripts = pkg.scripts || {}; +pkg.scripts.build = 'vite build'; +pkg.peerDependencies = { + vue: '^3.0.0' +}; + +fs.writeFileSync(pkgFile, JSON.stringify(pkg, null, 2)); +EOF + +# Run the Node.js script to update package.json. +node update-package.js + +# Remove the update script after running. +rm update-package.js + +# 8. Create a basic README file. +cat > README.md <<'EOF' +# Vue 3 Component Library + +This project is set up as a library of Vue 3 components written in TypeScript. + +## Development + +- Add your components in the src folder. +- Build the library with: npm run build + +## Usage + +After publishing, install via npm and register the library as a Vue plugin: + import { createApp } from 'vue' + import MyLibrary from 'your-library-name' + import App from './App.vue' + + const app = createApp(App); + app.use(MyLibrary); + app.mount('#app'); +EOF + +echo "Setup complete!" +echo "Next steps:" +echo "1. Customize your component(s) in the src folder." +echo "2. Run 'npm run build' to build distributable files into the dist folder." +echo "3. Publish your package to npm as desired."