Vite example

39cda376 · Mark Miller · b141122e · 39cda376 · 39cda376 · 39cda376
Commit 39cda376 authored Jul 10, 2022 by Mark Miller
--- a/README.md
+++ b/README.md
@@ -149,7 +149,39 @@ the content of those props into a child component which implements slots.

 ## Advanced Stuff

-### Vue CLI and Webpack
+### Bundlers
+Bundlers allow you to use the full power of Vue. However, they are much trickier
+to implement with Drupal. Below are two examples that run the development in a
+seperate index.html outside of Drupal but then allow the finished bundle to be
+used inside of a block.
+
+#### Vite
+[Vite](https://vitejs.dev/) is the latest bundler for Vue 3, but it assumes you
+are creating a pure javascript application. Thus, there is a lot of extra work
+to jump through to make its final bundle work with Drupal.
+
+The `vue3_vite` block is an example of using Vite to create the final block's
+code. Pay special attention to the `vite.config.ts` file which removes file
+hashing and uses the external global Vue package provided by Drupal.
+
+Be sure to set the `base` config to the location of your pdb_vue component.
+
+```yaml
+# Set your own path so assets will resolve correctly.
+base: '/modules/contrib/pdb_vue/components/vue3_vite/dist/',
+```
+
+Vite builds bundles as
+[ES Module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+packages so be sure to add the js file as a type `module`.
+
+```js
+add_js:
+  footer:
+    'dist/index.js': { attributes: { type: 'module'} }
+```
+
+#### Vue CLI and Webpack
 The `vue_example_webpack` (vue 2) block is an example of using the
 [Vue CLI](https://github.com/vuejs/vue-cli) to generate single-file components
 using ES6 with [Webpack](https://webpack.github.io/).

--- a/components/vue3_vite/.gitignore
+++ b/components/vue3_vite/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/components/vue3_vite/README.md
+++ b/components/vue3_vite/README.md
+# Vue 3 + TypeScript + Vite
+
+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.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+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 Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
--- a/components/vue3_vite/index.html
+++ b/components/vue3_vite/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div class="vue3-vite"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/components/vue3_vite/package-lock.json
+++ b/components/vue3_vite/package-lock.json
--- a/components/vue3_vite/package.json
+++ b/components/vue3_vite/package.json
+{
+  "name": "vue3_vite",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vite-plugin-externals": "^0.5.0",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.9",
+    "vue-tsc": "^0.34.7"
+  }
+}
--- a/components/vue3_vite/src/App.vue
+++ b/components/vue3_vite/src/App.vue
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
--- a/components/vue3_vite/src/assets/logo.png
+++ b/components/vue3_vite/src/assets/logo.png
--- a/components/vue3_vite/src/components/HelloWorld.vue
+++ b/components/vue3_vite/src/components/HelloWorld.vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
--- a/components/vue3_vite/src/env.d.ts
+++ b/components/vue3_vite/src/env.d.ts
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/components/vue3_vite/src/main.ts
+++ b/components/vue3_vite/src/main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('.vue3-vite')
--- a/components/vue3_vite/tsconfig.json
+++ b/components/vue3_vite/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/components/vue3_vite/tsconfig.node.json
+++ b/components/vue3_vite/tsconfig.node.json
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/components/vue3_vite/vite.config.ts
+++ b/components/vue3_vite/vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteExternalsPlugin } from 'vite-plugin-externals'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    // We don't want to double load Vue so set it to use the external package
+    // already provided by Drupal.
+    // https://github.com/crcong/vite-plugin-externals
+    viteExternalsPlugin({
+      vue: 'Vue'
+    }, { disableInServe: true }),
+  ],
+
+  // Set up the path to the dist folder from within Drupal.
+  // https://github.com/vitejs/vite/pull/7644 may make this easier in Vite 3.
+  base: '/modules/contrib/pdb_vue/components/vue3_vite/dist/',
+
+  build: {
+    rollupOptions: {
+      // Remove the [hash] since Drupal will take care of that.
+      output: {
+        entryFileNames: `[name].js`,
+        chunkFileNames: `chunks/[name].[hash].js`,
+        assetFileNames: `[name].[ext]`
+      }
+    }
+  },
+})
--- a/components/vue3_vite/vue3_vite.info.yml
+++ b/components/vue3_vite/vue3_vite.info.yml
+name: Vue3 Vite
+machine_name: vue3-vite
+type: pdb
+description: 'Vue Example using Vite to compile .vue components with TypeScript'
+package: Vue
+core_version_requirement: ^8 || ^9 || ^10
+module_status: active
+presentation: vue
+add_js:
+  footer:
+    'dist/index.js': { attributes: { type: 'module'} }
+add_css:
+  footer:
+    component:
+      'dist/index.css': {}