Merge pull request #309 from matiasfha/stackblitz

Author: spences10

package.json

@@ -18,15 +18,15 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
-    "build": "pnpm un sveltekit-embed && pnpm i -D sveltekit-embed && vite build",
-    "package": "svelte-kit package",
+    "build": "pnpm run sveltekit-embed && pnpm i -D sveltekit-embed && vite build",
+    "package": "svelte-package",
     "preview": "vite preview",
     "test": "playwright test",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "pretty-quick",
-    "package:local": "svelte-kit package && pnpm i -D ./package"
+    "package:local": "svelte-package && pnpm i -D ./package"
   },
   "husky": {
     "hooks": {
@@ -37,6 +37,7 @@
     "@playwright/test": "1.26.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
+    "@sveltejs/package": "1.0.0-next.5",
     "@tailwindcss/typography": "0.5.7",
     "@typescript-eslint/eslint-plugin": "5.38.1",
     "@typescript-eslint/parser": "5.38.1",
@@ -47,6 +48,7 @@
     "eslint-plugin-svelte3": "4.0.0",
     "husky": "8.0.1",
     "mdsvex": "0.10.6",
+    "package": "link:package",
     "postcss": "8.4.16",
     "postcss-load-config": "4.0.1",
     "prettier": "2.7.1",

pnpm-lock.yaml

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import GeneralObserver from "./general-observer.svelte"
+    
+    export let width: string = '100'
+    export let height: string = '500'
+    export let id: string = ''
+    export let view: 'editor' | 'preview' | 'default' = 'default'
+    export let clickToLoad: boolean = true //ctl
+    export let hideNavigation: boolean = false //hideNavigation
+    export let hideExplorer: boolean = true
+    export let theme: string | 'light' | 'dark' | 'default' = 'dark'
+    export let file: string | undefined
+
+    let baseUrl = `https://stackblitz.com/edit/${id}?embed=1
+    const config = {
+        ctl: `${clickToLoad ? 1 : 0}`,
+        hideExplorer: `${hideExplorer ? 1 : 0}`,
+        hideNavigation: `${hideNavigation ? 1: 0}`,
+        theme
+    }
+    if(view !== 'default') {
+        config['view'] = view 
+    }
+    if(file) {
+        config['file'] = file
+    }
+    const queryString = new URLSearchParams(config)
+    const src = `${baseUrl}&${queryString.toString()}`
+</script>
+
+<GeneralObserver {height} {width}>
+    <iframe 
+        {height}
+        class="stackblitz-sveltekit-embed"
+        title={`stackblitz-${id}`}
+        {src}
+        frameborder="no"
+        allowfullscreen
+        style={`
+            width: 100%;
+        `}
+    />
+</GeneralObserver>

src/lib/components/stackblitz.svelte

@@ -7,6 +7,7 @@ export { default as GenericEmbed } from './components/generic-embed.svelte'
 export { default as SimpleCast } from './components/simple-cast.svelte'
 export { default as SoundCloud } from './components/sound-cloud.svelte'
 export { default as Spotify } from './components/spotify.svelte'
+export { default as StackBlitz } from './components/stackblitz.svelte'
 export { default as Tweet } from './components/tweet.svelte'
 export { default as Vimeo } from './components/vimeo.svelte'
 export { default as YouTube } from './components/you-tube.svelte'

src/lib/index.ts

@@ -11,6 +11,7 @@
     Tweet,
     Vimeo,
     YouTube,
+    StackBlitz
   } from 'sveltekit-embed'
   import { Head } from 'svead'
   import { page } from '$app/stores'
@@ -322,3 +323,31 @@ Usage:
 Output:
 
 <YouTube youTubeId="L7_z8rcbFPg" />
+
+
+## StackBlitz 
+
+Props:
+
+```ts
+
+width: string = '100'
+height: string = '500'
+id: string = ''
+view: 'editor' | 'preview' | 'default' = 'default'
+clickToLoad: boolean = true 
+hideNavigation: boolean = false
+hideExplorer: boolean = true
+theme: string | 'light' | 'dark' | 'default' = 'dark'
+file: string | undefined
+```
+
+Usage:
+
+```html
+<StackBlitz id="vitejs-vite-yyoood" theme="light"/>
+```
+
+Output:
+
+<StackBlitz id="vitejs-vite-yyoood" hideNavigation />