@inkdropapp/theme-dev-helpers 0.3.1 → 0.3.3

package/README.md

@@ -36,3 +36,12 @@ If your theme package name doesn't include 'dark' but it is a dark mode:
 ```sh
 generate-palette -a dark
 ```
+
+## Run dev server
+
+It provides a simple UI to preview your theme with hot-reloading.
+
+```sh
+dev-server
+```
+

package/bin/dev-server

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+echo $SCRIPT_DIR
+
+bunx --bun vite "$SCRIPT_DIR/.."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
@@ -8,7 +8,6 @@
     "markdown"
   ],
   "scripts": {
-    "dev-server": "bunx --bun vite",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -18,7 +17,8 @@
   "author": "Takuya Matsuyama<t@inkdrop.app>",
   "license": "MIT",
   "bin": {
-    "generate-palette": "./bin/generate-palette"
+    "generate-palette": "./bin/generate-palette",
+    "dev-server": "./bin/dev-server"
   },
   "dependencies": {
     "@inkdropapp/base-ui-theme": "^0.3.1",

package/src/dev-server.tsx

@@ -6,21 +6,18 @@ import "./dev-server.css";
 import "@inkdropapp/css/reset.css";
 import "@inkdropapp/css/tokens.css";
 import "@inkdropapp/base-ui-theme/styles/theme.css";
-import "@/styles/tokens.css";
-import "@/styles/theme.css";
 
 import { ColorTokensPage } from "./dev-server/color-tokens";
 import { VariablesPage } from "./dev-server/variables";
 import { ComponentsPage } from "./dev-server/components";
+const baseProjectPath = import.meta.env.BASE_PROJECT_PATH || ''
+const styleSheets: string[] = import.meta.env.STYLE_SHEETS || []
 
-// const cssFiles = [
-//   "@/styles/tokens.css",
-//   "@/styles/theme.css",
-// ];
-//
-// cssFiles.forEach((file) => {
-//   import(/* @vite-ignore */ file);
-// });
+const cssFiles = styleSheets.map(ss => `${baseProjectPath}/styles/${ss}`)
+
+cssFiles.forEach((file) => {
+  import(file);
+});
 
 const router = createBrowserRouter([
   {

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly BASE_PROJECT_PATH: string
+  readonly STYLE_SHEETS: string[]
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/vite.config.ts

@@ -1,9 +1,14 @@
-import { fileURLToPath, URL } from 'url'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-const baseProjectPath = process.env.BASE_PROJECT_PATH || fileURLToPath(new URL('../../..', import.meta.url))
+const baseProjectPath = process.env.BASE_PROJECT_PATH || process.cwd()
 console.log('Base project path:', baseProjectPath)
+const packageJson = await import(`${baseProjectPath}/package.json`, {
+  with: {
+    type: "json",
+  }
+})
+const { styleSheets } = packageJson
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -16,9 +21,16 @@ export default defineConfig({
       }
     ]
   },
+  define: {
+    'import.meta.env.BASE_PROJECT_PATH': JSON.stringify(baseProjectPath),
+    'import.meta.env.STYLE_SHEETS': JSON.stringify(styleSheets)
+  },
   server: {
     fs: {
-      allow: ['src', 'node_modules', baseProjectPath]
+      strict: false
     }
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom', 'react-dom/client', 'react/jsx-dev-runtime', 'react/jsx-runtime']
   }
 })