Merge pull request #28 from theplant/vue3

upgrade to vue 3

builder.go

@@ -192,18 +192,19 @@ func (b *Builder) layout(body *DocBuilder) (r HTMLComponent) {
 		),
 		Body(
 			Div(
-				Div(
+				web.Scope(
 					Div(
 						Div(
-							b.aside(body),
-							Main(
-								body,
-								RawHTML("<search-result></search-result>"),
-							).Class("flex flex-col w-full bg-white overflow-x-hidden overflow-y-auto"),
-						).Class("flex h-full"),
-					).Class("flex-1 flex flex-col overflow-hidden"),
-				).Class("flex h-screen").
-					Attr(web.InitContextVars, `{hideAside: false}`),
+							Div(
+								b.aside(body),
+								Main(
+									body,
+									RawHTML("<search-result></search-result>"),
+								).Class("flex flex-col w-full bg-white overflow-x-hidden overflow-y-auto"),
+							).Class("flex h-full"),
+						).Class("flex-1 flex flex-col overflow-hidden"),
+					).Class("flex h-screen"),
+				).VSlot("{ locals }").Init(`{hideAside: false}`),
 			).Id("app").
 				Attr("v-cloak", true),
 		),
@@ -254,8 +255,9 @@ func (b *Builder) aside(doc *DocBuilder) (r HTMLComponent) {
 		).Class("h-12"),
 		content,
 	).Class("flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto").
-		Attr("v-show", "!vars.hideAside").
+		Attr("v-if", "!locals.hideAside").
 		Attr("id", "menuScroller")
+
 }
 
 var startTime = time.Now()

ch/build.sh

@@ -7,4 +7,4 @@ fi
 
 rm -r $CUR/codehighlightjs/dist
 echo "Building codehighlightjs"
-cd $CUR/codehighlightjs && yarn && yarn build
+cd $CUR/codehighlightjs && pnpm install && pnpm format && pnpm build

ch/codehighlightjs.go

@@ -10,7 +10,7 @@ import (
 var assetsbox embed.FS
 
 func JSComponentsPack() web.ComponentsPack {
-	v, err := assetsbox.ReadFile("codehighlightjs/dist/codehighlight.umd.min.js")
+	v, err := assetsbox.ReadFile("codehighlightjs/dist/index.js")
 	if err != nil {
 		panic(err)
 	}
@@ -19,7 +19,7 @@ func JSComponentsPack() web.ComponentsPack {
 }
 
 func CSSComponentsPack() web.ComponentsPack {
-	v, err := assetsbox.ReadFile("codehighlightjs/dist/codehighlight.css")
+	v, err := assetsbox.ReadFile("codehighlightjs/dist/style.css")
 	if err != nil {
 		panic(err)
 	}

ch/codehighlightjs/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

ch/codehighlightjs/.gitignore

@@ -1,20 +1,30 @@
-.DS_Store
-node_modules
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
+
+*.tsbuildinfo

ch/codehighlightjs/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}

ch/codehighlightjs/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

ch/codehighlightjs/README.md

@@ -1,29 +1,35 @@
 # codehighlightjs
 
-## Project setup
-```
-yarn install
-```
+This template should help get you started developing with Vue 3 in Vite.
 
-### Compiles and hot-reloads for development
-```
-yarn run serve
-```
+## Recommended IDE Setup
 
-### Compiles and minifies for production
-```
-yarn run build
-```
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
-### Run your tests
-```
-yarn run test
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
 ```
 
-### Lints and fixes files
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
 ```
-yarn run lint
+
+### Compile and Minify for Production
+
+```sh
+pnpm build
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

ch/codehighlightjs/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

ch/codehighlightjs/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

ch/codehighlightjs/package.json

@@ -1,60 +1,27 @@
 {
-	"name": "codehighlightjs",
-	"version": "0.1.0",
-	"private": true,
-	"scripts": {
-		"serve": "vue-cli-service serve",
-		"build": "vue-cli-service build --target lib --name codehighlight --formats umd-min src/main.js",
-		"lint": "vue-cli-service lint"
-	},
-	"dependencies": {
-		"@highlightjs/vue-plugin": "^1.0.2",
-		"core-js": "^3.21.0",
-		"highlight.js": "^10.7.2",
-		"vue": "^2.6.14"
-	},
-	"devDependencies": {
-		"@vue/cli-plugin-babel": "^5.0.0-beta.2",
-		"@vue/cli-plugin-eslint": "^5.0.0-beta.2",
-		"@vue/cli-service": "^5.0.0-beta.2",
-		"babel-eslint": "^10.1.0",
-		"eslint": "^7.31.0",
-		"eslint-plugin-vue": "^7.14.0",
-		"vue-template-compiler": "^2.6.14"
-	},
-	"vue": {
-		"runtimeCompiler": true,
-		"productionSourceMap": false,
-		"devServer": {
-			"port": 3060
-		},
-		"configureWebpack": {
-			"externals": {
-				"vue": "Vue"
-			}
-		}
-	},
-	"eslintConfig": {
-		"root": true,
-		"env": {
-			"node": true
-		},
-		"extends": [
-			"plugin:vue/essential",
-			"eslint:recommended"
-		],
-		"rules": {},
-		"parserOptions": {
-			"parser": "babel-eslint"
-		}
-	},
-	"postcss": {
-		"plugins": {
-			"autoprefixer": {}
-		}
-	},
-	"browserslist": [
-		"> 1%",
-		"last 2 versions"
-	]
+  "name": "codehighlightjs",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "highlight.js": "^11.9.0",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "prettier": "^3.0.3",
+    "vite": "^5.1.5"
+  }
 }