feat: Export and bootstrap the /client package

aklinker1 · aklinker1 · commit 5b07c95ec727 · 2023-06-25T10:53:35.000-05:00
diff --git a/demo/entrypoints/background.ts b/demo/entrypoints/background.ts
@@ -0,0 +1,6 @@
+import { defineBackgroundScript } from 'exvite/client';
+import browser from 'webextension-polyfill';
+
+export default defineBackgroundScript(() => {
+  console.log(browser.runtime.id);
+});
diff --git a/demo/entrypoints/options/index.html b/demo/entrypoints/options/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>Extension Settings</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <p>Hello options page!</p>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
diff --git a/demo/entrypoints/options/main.ts b/demo/entrypoints/options/main.ts
@@ -0,0 +1,3 @@
+import browser from 'webextension-polyfill';
+
+console.log(browser.runtime.id);
diff --git a/demo/entrypoints/options/style.css b/demo/entrypoints/options/style.css
@@ -0,0 +1,4 @@
+html {
+  background: black;
+  color: white;
+}
diff --git a/demo/entrypoints/overlay.content.ts b/demo/entrypoints/overlay.content.ts
@@ -0,0 +1,11 @@
+import { defineContentScript, mountContentScriptUi } from 'exvite/client';
+import browser from 'webextension-polyfill';
+
+export default defineContentScript({
+  matches: ['*://*/*'],
+  async main() {
+    console.log(browser.runtime.id);
+
+    mountContentScriptUi();
+  },
+});
diff --git a/demo/entrypoints/popup.html b/demo/entrypoints/popup.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup</title>
+  </head>
+  <body>
+    <p>Hello popup!</p>
+  </body>
+</html>
diff --git a/demo/package.json b/demo/package.json
@@ -5,10 +5,11 @@
     "build": "pnpm -w build && exvite build",
     "prepare": "pnpm -w build && exvite prepare"
   },
+  "dependencies": {
+    "webextension-polyfill": "^0.10.0"
+  },
   "devDependencies": {
+    "@types/webextension-polyfill": "^0.10.0",
     "exvite": "workspace:*"
-  },
-  "dependencies": {
-    "unimport": "^3.0.8"
   }
 }
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.base.json",
+  "exclude": [".output"]
+}
diff --git a/demo/utils/logger.ts b/demo/utils/logger.ts
@@ -0,0 +1 @@
+export default console;
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "files": [
     "dist"
   ],
-  "bin": "dist/cli.cjs",
+  "bin": "dist/cli/index.cjs",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,13 +25,19 @@
       "require": "./dist/index.cjs",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./client": {
+      "require": "./dist/client/index.cjs",
+      "import": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts"
     }
   },
   "scripts": {
     "dev": "tsx src/cli.ts",
     "build": "run-s build:*",
     "build:js": "tsup src/index.ts --clean --sourcemap --dts --format esm,cjs",
-    "build:cli": "tsup src/cli.ts",
+    "build:cli": "tsup src/cli/index.ts -d dist/cli --sourcemap",
+    "build:client": "tsup src/client/index.ts -d dist/client --sourcemap --dts --format esm,cjs",
     "format": "prettier --write .",
     "format:check": "prettier --write .",
     "prepare": "simple-git-hooks"
diff --git a/src/cli.ts b/src/cli.ts
diff --git a/src/client/defineBackgroundScript.ts b/src/client/defineBackgroundScript.ts
@@ -0,0 +1,14 @@
+import { BackgroundScriptDefintition } from '..';
+
+export function defineBackgroundScript(
+  main: () => void,
+): BackgroundScriptDefintition;
+export function defineBackgroundScript(
+  definition: BackgroundScriptDefintition,
+): BackgroundScriptDefintition;
+export function defineBackgroundScript(
+  arg: (() => void) | BackgroundScriptDefintition,
+): BackgroundScriptDefintition {
+  if (typeof arg === 'function') return { main: arg };
+  return arg;
+}
diff --git a/src/client/defineContentScript.ts b/src/client/defineContentScript.ts
@@ -0,0 +1,7 @@
+import { ContentScriptDefinition } from '../types';
+
+export function defineContentScript(
+  definition: ContentScriptDefinition,
+): ContentScriptDefinition {
+  return definition;
+}
diff --git a/src/client/index.ts b/src/client/index.ts
@@ -0,0 +1,3 @@
+export * from './defineContentScript';
+export * from './defineBackgroundScript';
+export * from './mountContentScriptUi';
diff --git a/src/client/mountContentScriptUi.ts b/src/client/mountContentScriptUi.ts
@@ -0,0 +1,3 @@
+export function mountContentScriptUi() {
+  throw Error('Not implemented: mountContentScriptUi');
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import browser from 'webextension-polyfill';`
	`2`	`+`
	`3`	`+console.log(browser.runtime.id);`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +html {
 +  background: black;
 +  color: white;
 +}