Merge pull request #47 from tony-sull/fix/blok-name-resolution

fix: supports blok names that aren't valid JS variable names

lib/StoryblokComponent.astro

@@ -1,8 +1,25 @@
 ---
 import components from "virtual:storyblok-components";
+import camelcase from "camelcase";
+
 const { blok, ...props } = Astro.props;
 
-const Component = components[blok.component];
+/**
+ * convert blok components to camel case to match vite-plugin-storyblok
+ */
+const key = camelcase(blok.component);
+
+if (!(key in components)) {
+  /**
+   * Component not found! Log an error with details on the blok name that could not be found
+   * TODO: Add support for a placeholder component as a fallback?
+   */
+  throw new Error(
+    `Component could not be found for blok "${blok.component}"! Is it defined in astro.config.mjs?`
+  );
+}
+
+const Component = components[key];
 ---
 
 <Component blok={blok} {...props} />

lib/package.json

@@ -27,7 +27,8 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^1.8.5"
+    "@storyblok/js": "^1.8.5",
+    "camelcase": "^7.0.0"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^2.0.7",
@@ -59,4 +60,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

lib/vite-plugin-storyblok.js

@@ -1,6 +1,8 @@
 /**
  * Custom Vite plugin by Tony Sull (https://github.com/tony-sull)
  */
+import camelcase from "camelcase";
+
 export function vitePluginStoryblok(components) {
   const virtualModuleId = "virtual:storyblok-components";
   const resolvedVirtualModuleId = "\0" + virtualModuleId;
@@ -17,11 +19,15 @@ export function vitePluginStoryblok(components) {
         const imports = [];
         for await (const [key, value] of Object.entries(components)) {
           const { id } = await this.resolve("/src/" + value + ".astro");
-          imports.push(`import ${key} from "${id}"`);
+          /**
+           * convert blok names to camel case for valid import names
+           * StoryblokComponent.astro needs to do the same when resolving components!
+           */
+          imports.push(`import ${camelcase(key)} from "${id}"`);
         }
-        return `${imports.join(";")};export default {${Object.keys(
-          components
-        ).join(",")}}`;
+        return `${imports.join(";")};export default {${Object.keys(components)
+          .map((key) => camelcase(key))
+          .join(",")}}`;
       }
     },
   };