refactor: migrate app.js to app.ts

assets/style.css

@@ -23,3 +23,14 @@ body {
   padding-left: 4px;
   padding-right: 4px;
 }
+
+.markmap-highlight-area {
+  position: absolute;
+  width: var(--mm-highlight-width);
+  height: var(--mm-highlight-height);
+  left: var(--mm-highlight-x);
+  top: var(--mm-highlight-y);
+  z-index: -1;
+  background: #ff02;
+  transform: scale(1.2);
+}

package.json

@@ -103,13 +103,15 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^20.4.2",
     "@types/vscode": "~1.75.0",
+    "@types/vscode-webview": "^1.57.5",
     "del-cli": "^5.1.0",
     "husky": "^8.0.3",
     "lodash.debounce": "^4.0.8",
-    "markmap-common": "0.17.3-beta.4",
-    "markmap-lib": "0.17.3-beta.4",
-    "markmap-render": "0.17.3-beta.4",
-    "markmap-toolbar": "0.17.3-beta.4",
+    "markmap-common": "0.17.3-alpha.8",
+    "markmap-lib": "0.17.3-alpha.8",
+    "markmap-render": "0.17.3-alpha.8",
+    "markmap-toolbar": "0.17.3-alpha.8",
+    "markmap-view": "0.17.3-alpha.8",
     "read-pkg-up": "^10.0.0",
     "vscode-uri": "^3.0.7"
   }

rollup.config.mjs

@@ -1,3 +1,4 @@
+import { defineConfig } from 'rollup';
 import { defineExternal, definePlugins } from '@gera2ld/plaid-rollup';
 import { createRequire } from 'module';
 import { dirname } from 'path';
@@ -10,28 +11,42 @@ async function getVersion(module) {
   return packageJson.version;
 }
 
-export default async () => {
-  const replaceValues = {
-    'process.env.TOOLBAR_VERSION': JSON.stringify(
-      await getVersion('markmap-toolbar'),
-    ),
-  };
+const replaceValues = {
+  'process.env.TOOLBAR_VERSION': JSON.stringify(
+    await getVersion('markmap-toolbar'),
+  ),
+};
 
-  const external = defineExternal(['path', 'vscode']);
-  const rollupConfig = {
-    input: {
-      extension: 'src/extension.ts',
-      postbuild: 'src/postbuild.ts',
-    },
-    plugins: definePlugins({
-      replaceValues,
-    }),
-    external,
-    output: {
-      format: 'cjs',
-      dir: 'dist',
-    },
-  };
+const external = defineExternal(['path', 'vscode']);
 
-  return rollupConfig;
-};
+export default defineConfig([{
+  input: {
+    extension: 'src/extension.ts',
+    postbuild: 'src/postbuild.ts',
+  },
+  plugins: definePlugins({
+    replaceValues,
+  }),
+  external,
+  output: {
+    format: 'cjs',
+    dir: 'dist',
+  },
+}, {
+  input: {
+    app: 'src/app.ts',
+  },
+  plugins: definePlugins({
+    replaceValues,
+  }),
+  external: ['markmap-common', 'markmap-toolbar', 'markmap-view'],
+  output: {
+    format: 'iife',
+    dir: 'dist',
+    globals: {
+      'markmap-common': 'markmap',
+      'markmap-toolbar': 'markmap',
+      'markmap-view': 'markmap',
+    }
+  },
+}]);