Merge branch 'main' of https://github.com/storyblok/storyblok-svelte

storyblok · Mar 15, 2022 · 72403e5 · 72403e5
2 parents 8ce84a8 + 6415861
commit 72403e5
Show file tree

Hide file tree

Showing 11 changed files with 145 additions and 16 deletions.
diff --git a/lib/cypress/component/index.spec.js b/lib/cypress/component/index.spec.js
@@ -101,20 +101,5 @@ describe("@storyblok/svelte", () => {
         "You didn't load the teaser"
       );
     });
-    it("can load the components asynchronously", () => {
-      mount(App, {
-        props: {
-          blok: {
-            component: "teaser",
-            headline: "Hello Svelte",
-            _editable: `<!--#storyblok#{ "id": 12345, "uid": "fc34-uad1"}-->`,
-          },
-          components: {
-            teaser: () => import("@storyblok/playground/Teaser.svelte"),
-          },
-        },
-      });
-      cy.get('[data-test="teaser"]').should("exist");
-    });
   });
 });
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "version": "0.0.1",
   "workspaces": [
     "./lib",
-    "./playground"
+    "./playground",
+    "./playground-sveltekit"
   ],
   "scripts": {
     "dev": "npm run dev --workspace=lib & npm run demo",

diff --git a/playground-sveltekit/package.json b/playground-sveltekit/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "my-app",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "svelte": "^3.44.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@storyblok/svelte": "^1.0.1",
+    "axios": "^0.26.1"
+  }
+}
diff --git a/playground-sveltekit/src/app.html b/playground-sveltekit/src/app.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="description" content="Svelte demo app" />
+    <link rel="icon" href="%svelte.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    %svelte.head%
+  </head>
+  <body>
+    <div>%svelte.body%</div>
+  </body>
+</html>
diff --git a/playground-sveltekit/src/components/Feature.svelte b/playground-sveltekit/src/components/Feature.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { storyblokEditable } from "@storyblok/svelte";
+
+  export let blok;
+</script>
+
+<div use:storyblokEditable={blok} class="py-2">
+  <h1 class="text-lg">{blok.name}</h1>
+</div>
diff --git a/playground-sveltekit/src/components/Grid.svelte b/playground-sveltekit/src/components/Grid.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { storyblokEditable, StoryblokComponent } from "@storyblok/svelte";
+
+  export let blok;
+</script>
+
+<div use:storyblokEditable={blok} class="flex py-8 mb-6">
+  {#each blok.columns as blok}
+    <div class="flex-auto px-6">
+      <StoryblokComponent {blok} />
+    </div>
+  {/each}
+</div>
diff --git a/playground-sveltekit/src/components/Page.svelte b/playground-sveltekit/src/components/Page.svelte
@@ -0,0 +1,11 @@
+<script>
+  import { storyblokEditable, StoryblokComponent } from "@storyblok/svelte";
+
+  export let blok;
+</script>
+
+<div use:storyblokEditable={blok} class="px-6">
+  {#each blok.body as blok}
+    <StoryblokComponent {blok} />
+  {/each}
+</div>
diff --git a/playground-sveltekit/src/components/Teaser.svelte b/playground-sveltekit/src/components/Teaser.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { storyblokEditable } from "@storyblok/svelte";
+
+  export let blok;
+</script>
+
+<div
+  use:storyblokEditable={blok}
+  class="py-8 mb-6 text-5xl font-bold text-center"
+>
+  {blok.headline}
+</div>
diff --git a/playground-sveltekit/src/routes/__layout.svelte b/playground-sveltekit/src/routes/__layout.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { storyblokInit, apiPlugin } from "@storyblok/svelte";
+  import Feature from "../components/Feature.svelte";
+  import Grid from "../components/Grid.svelte";
+  import Page from "../components/Page.svelte";
+  import Teaser from "../components/Teaser.svelte";
+
+  storyblokInit({
+    accessToken: "OurklwV5XsDJTIE1NJaD2wtt",
+    use: [apiPlugin],
+    components: {
+      // teaser: () => import("./Teaser.svelte"), // Lazy load it on demand
+      feature: Feature,
+      grid: Grid,
+      page: Page,
+      teaser: Teaser,
+    },
+  });
+
+  console.log("teaser", Teaser);
+</script>
+
+<main>
+  <slot />
+</main>
diff --git a/playground-sveltekit/src/routes/index.svelte b/playground-sveltekit/src/routes/index.svelte
@@ -0,0 +1,33 @@
+<script context="module">
+  import { useStoryblokApi } from "@storyblok/svelte";
+
+  export async function load() {
+    const storyblokApi = useStoryblokApi();
+    const { data } = await storyblokApi.get("cdn/stories/svelte", {
+      version: "draft",
+    });
+
+    return {
+      status: 200,
+      props: { story: data.story },
+    };
+  }
+</script>
+
+<script>
+  import { onMount } from "svelte";
+  import { useStoryblokBridge, StoryblokComponent } from "@storyblok/svelte";
+
+  export let story;
+  console.log(story, "story");
+
+  onMount(() => {
+    useStoryblokBridge(story.id, (newStory) => (story = newStory));
+  });
+</script>
+
+<div>
+  {#if story}
+    <StoryblokComponent blok={story.content} />
+  {/if}
+</div>
diff --git a/playground-sveltekit/vite.config.js b/playground-sveltekit/vite.config.js
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+export default defineConfig({
+  plugins: [svelte()],
+});