@inkdropapp/theme-dev-helpers 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkdropapp/theme-dev-helpers",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "description": "A helper module for creating themes for Inkdrop",
   "keywords": [
@@ -23,8 +23,6 @@
   "dependencies": {
     "@inkdropapp/base-ui-theme": "^0.3.1",
     "@inkdropapp/css": "^0.4.2",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
     "commander": "^12.1.0",
     "puppeteer": "^23.5.3",
@@ -32,10 +30,12 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"
   },
   "devDependencies": {
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "typescript-eslint": "^8.7.0",
     "prettier": "^3.3.3"
   }
 }

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/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": [
       "ES2020",
@@ -10,7 +10,7 @@
     "module": "ESNext",
     "skipLibCheck": true,
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "Node",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",

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']
   }
 })