Fix for undefined style prop error (#49)

* fix for undefined style props * add changeset * chrome setup
embellishing · Jun 15, 2024 · 84fbfd4 · 84fbfd4
1 parent 71690ec
commit 84fbfd4
Show file tree

Hide file tree

Showing 12 changed files with 1,418 additions and 14 deletions.
diff --git a/.changeset/nasty-carrots-dream.md b/.changeset/nasty-carrots-dream.md
@@ -0,0 +1,5 @@
+---
+"@embellish/react": patch
+---
+
+Fix for runtime error when no style props are defined.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -37,6 +37,13 @@ jobs:
 
       - run: pnpm check
 
+      - uses: browser-actions/setup-chrome@v1
+        id: chrome
+
+      - run: pnpm -r test
+        env:
+          PUPPETEER_EXECUTABLE_PATH: ${{ steps.chrome.outputs.chrome-path }}
+
       - if: github.ref == 'refs/heads/master'
         run:
           echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >>

diff --git a/eslint.config.js b/eslint.config.js
@@ -14,6 +14,16 @@ export default tseslint.config(
     ignores: ["**/dist/**"],
   },
   {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+    },
     languageOptions: {
       globals: {
         process: "readonly",
@@ -39,7 +49,7 @@ export default tseslint.config(
         { prefer: "type-imports", disallowTypeAnnotations: true },
       ],
       "import/consistent-type-specifier-style": "error",
-      "import/extensions": ["error", "always"],
+      "import/extensions": ["error", "ignorePackages"],
       "import/first": "error",
       "import/newline-after-import": "error",
       "import/no-absolute-path": "error",
@@ -62,4 +72,18 @@ export default tseslint.config(
       "simple-import-sort/imports": "error",
     },
   },
+  {
+    files: ["packages/react/**/*"],
+    rules: {
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: true,
+          peerDependencies: true,
+          optionalDependencies: false,
+          packageDir: "packages/react",
+        },
+      ],
+    },
+  },
 );
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -37,6 +37,11 @@
     "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "puppeteer": "^22.10.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsx": "^4.15.1",
     "vite": "^5.2.11",
     "vite-plugin-dts": "^3.9.1"
   },
@@ -45,6 +50,8 @@
     "react": ">=17 <20"
   },
   "scripts": {
-    "prepare": "tsc && vite build"
+    "prepare": "tsc --project src && vite build",
+    "test": "tsx --tsconfig ./test/tsconfig.json --test test/index.tsx",
+    "test.watch": "tsx watch --tsconfig ./test/tsconfig.json --test test/index.tsx"
   }
 }
diff --git a/packages/react/src/component.js b/packages/react/src/component.js
@@ -92,7 +92,7 @@ function stringifyValue(propertyName, value) {
 
 export function createComponent({
   displayName,
-  styleProps,
+  styleProps = {},
   defaultAs = "div",
   defaultStyle = {},
   conditions: configConditions,

diff --git a/packages/react/src/hooks.tsx → packages/react/src/hooks.ts b/packages/react/src/hooks.tsx → packages/react/src/hooks.ts
@@ -1,5 +1,6 @@
 import type { HookId, Selector } from "@embellish/core";
 import { createHooks as createHooksImpl } from "@embellish/core";
+import { createElement } from "react";
 
 export function createHooks<Hooks extends Selector[]>(
   hooks: Hooks,
@@ -11,7 +12,9 @@ export function createHooks<Hooks extends Selector[]>(
   return {
     ...rest,
     StyleSheet() {
-      return <style dangerouslySetInnerHTML={{ __html: styleSheet() }} />;
+      return createElement("style", {
+        dangerouslySetInnerHTML: { __html: styleSheet() },
+      });
     },
   };
 }
diff --git a/packages/react/src/tsconfig.json b/packages/react/src/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2019"],
+    "checkJs": false,
+    "skipLibCheck": false,
+    "types": ["react"]
+  }
+}