feat: compile component slot outlet (#430)

* chore: copied from prev chapter * feat: slot outlet
chibivue-land · Dec 17, 2024 · 52de666 · 52de666
1 parent 44ab1f2
commit 52de666
Show file tree

Hide file tree

Showing 90 changed files with 8,275 additions and 178 deletions.
diff --git a/...impls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/.gitignore b/...impls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/.gitignore
@@ -0,0 +1,24 @@
+# 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?
diff --git a/...impls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/index.html b/...impls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>chibivue</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/...pls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/package.json b/...pls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}
diff --git a/...mpls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/App.vue b/...mpls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/App.vue
@@ -0,0 +1,20 @@
+<script>
+import Comp from './Comp.vue'
+export default {
+  components: {
+    Comp,
+  },
+  setup() {
+    const count = ref(0)
+    return { count }
+  },
+}
+</script>
+
+<template>
+  <Comp>
+    <template #default>
+      <button @click="count++">count is: {{ count }}</button>
+    </template>
+  </Comp>
+</template>
diff --git a/...pls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/Comp.vue b/...pls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/Comp.vue
@@ -0,0 +1,3 @@
+<template>
+  <p><slot name="default" /></p>
+</template>
diff --git a/...mpls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/main.ts b/...mpls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/src/main.ts
@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { createApp } from 'chibivue'
+import { createStore } from 'chibivue-store'
+import App from './App.vue'
+
+const app = createApp(App)
+app.mount('#app')
diff --git a/...ls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/tsconfig.json b/...ls/50_basic_template_compiler/080_component_slot_outlet/examples/playground/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "paths": {
+      "chibivue": ["../../packages"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/...s/50_basic_template_compiler/080_component_slot_outlet/examples/playground/vite.config.ts b/...s/50_basic_template_compiler/080_component_slot_outlet/examples/playground/vite.config.ts
@@ -0,0 +1,16 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+
+import chibivue from '../../packages/@extensions/vite-plugin-chibivue'
+
+const dirname = path.dirname(fileURLToPath(new URL(import.meta.url)))
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      chibivue: path.resolve(dirname, '../../packages'),
+    },
+  },
+  plugins: [chibivue()],
+})
diff --git a/book/impls/50_basic_template_compiler/080_component_slot_outlet/package.json b/book/impls/50_basic_template_compiler/080_component_slot_outlet/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "01_project_setup",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "cd examples/playground && pnpm i && pnpm run dev"
+  },
+  "keywords": [],
+  "author": "ubugeeei <[email protected]>",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^22.10.1"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.21.8",
+    "magic-string": "^0.30.0"
+  }
+}
diff --git a/...ate_compiler/080_component_slot_outlet/packages/@extensions/vite-plugin-chibivue/index.ts b/...ate_compiler/080_component_slot_outlet/packages/@extensions/vite-plugin-chibivue/index.ts
@@ -0,0 +1,53 @@
+import fs from 'node:fs'
+import type { Plugin } from 'vite'
+import { createFilter } from 'vite'
+import { parse, rewriteDefault } from '../../compiler-sfc'
+import { compile } from '../../compiler-dom'
+
+export default function vitePluginChibivue(): Plugin {
+  const filter = createFilter(/\.vue$/)
+
+  return {
+    name: 'vite:chibivue',
+    resolveId(id) {
+      if (id.match(/\.vue\.css$/)) return id
+    },
+
+    load(id) {
+      if (id.match(/\.vue\.css$/)) {
+        const filename = id.replace(/\.css$/, '')
+        const content = fs.readFileSync(filename, 'utf-8')
+        const { descriptor } = parse(content, { filename })
+        const styles = descriptor.styles.map(it => it.content).join('\n')
+        return { code: styles }
+      }
+    },
+
+    transform(code, id) {
+      if (!filter(id)) return
+
+      const outputs = []
+      outputs.push("import * as ChibiVue from 'chibivue'")
+      outputs.push(`import '${id}.css'`)
+
+      const { descriptor } = parse(code, { filename: id })
+
+      const SFC_MAIN = '_sfc_main'
+      const scriptCode = rewriteDefault(
+        descriptor.script?.content ?? '',
+        SFC_MAIN,
+      )
+      outputs.push(scriptCode)
+
+      const templateCode = compile(descriptor.template?.content ?? '', {
+        isBrowser: false,
+      })
+      outputs.push(templateCode)
+
+      outputs.push('\n')
+      outputs.push(`export default { ...${SFC_MAIN}, render }`)
+
+      return { code: outputs.join('\n') }
+    },
+  }
+}