@storyblok/svelte 1.0.0 → 1.0.1

package/StoryblokComponent.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { getComponent } from "./index";
+  export let blok;
+  let resolvedComponent;
+
+  if (blok) {
+    const component = getComponent(blok.component);
+    if (component) {
+      const loadComponent = async () => {
+        const { default: loadedComponent } = await component();
+        resolvedComponent = loadedComponent;
+      };
+
+      const isSvelteComponent = component.name.startsWith("Proxy");
+      if (isSvelteComponent) resolvedComponent = component;
+      else loadComponent();
+    }
+  } else {
+    console.error("Please provide a 'blok' property to the StoryblokComponent");
+  }
+</script>
+
+<svelte:component this={resolvedComponent} {blok} {...$$restProps} />

package/index.js

@@ -0,0 +1,60 @@
+import {
+  storyblokEditable as sbEdit,
+  storyblokInit as sbInit,
+} from "@storyblok/js";
+export { useStoryblokBridge, apiPlugin } from "@storyblok/js";
+
+export const storyblokEditable = (node, value) => {
+  const updateDom = (value) => {
+    const options = sbEdit(value);
+    if (options["data-blok-c"]) {
+      node.setAttribute("data-blok-c", options["data-blok-c"]);
+      node.setAttribute("data-blok-uid", options["data-blok-uid"]);
+      node.classList.add("storyblok__outline");
+    }
+  };
+
+  updateDom(value); // when is mounted
+
+  return {
+    update(newValue) {
+      // when value changes
+      updateDom(newValue);
+    },
+  };
+};
+
+let storyblokApiInstance = null;
+export const useStoryblokApi = () => {
+  if (!storyblokApiInstance) {
+    console.log(
+      `You can't use useStoryblokApi if you're not loading apiPlugin.`
+    );
+  }
+  return storyblokApiInstance;
+};
+
+let componentsMap = null;
+export const storyblokInit = (options) => {
+  const { storyblokApi } = sbInit(options);
+  storyblokApiInstance = storyblokApi;
+  componentsMap = options.components || {};
+};
+
+export const getComponent = (componentName) => {
+  const component = componentsMap[componentName];
+  if (!component) {
+    console.error(`You didn't load the ${componentName} component. Please load it in storyblokInit. For example:
+storyblokInit({
+    accessToken: "<your-token>",
+    components: {
+      "teaser": Teaser
+    }
+})
+`);
+  }
+
+  return component;
+};
+
+export { default as StoryblokComponent } from "./StoryblokComponent.svelte";

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@storyblok/svelte",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Storyblok SDK to connect Storyblok with Svelte",
   "main": "./dist/storyblok-svelte.js",
   "module": "./dist/storyblok-svelte.mjs",
   "svelte": "index.js",
   "files": [
-    "dist"
+    "dist",
+    "index.js",
+    "StoryblokComponent.svelte"
   ],
   "exports": {
     ".": {