docs: add dynamic import example for code-splitting (#234)

* chore(examples): add `DynamicImport` component * docs: add section on code-splitting
metonym · Aug 7, 2022 · c179b55 · c179b55
1 parent 97c8e5c
commit c179b55
Show file tree

Hide file tree

Showing 11 changed files with 139 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -237,6 +237,38 @@ Refer to the highlight.js [language definition guide](https://highlightjs.readth
 <Highlight {language} code="..." />
 ```
 
+## Code-splitting
+
+You can use the `dynamic import` syntax to code-split code.
+
+In the example below, the `HighlightAuto` component and injected styles are dynamically loaded.
+
+```svelte
+<script>
+ import { onMount } from "svelte";
+
+ let component;
+ let styles;
+
+ onMount(async () => {
+ component = (await import("svelte-highlight")).HighlightAuto;
+ styles = (await import("svelte-highlight/styles/github")).default;
+ });
+</script>
+
+<svelte:head>
+ {#if styles}
+ {@html styles}
+ {/if}
+</svelte:head>
+
+<svelte:component
+ this={component}
+ langtag
+ code={`body {\n padding: 0;\n color: red;\n}`}
+/>
+```
+
 ## API
 
 ### Props

diff --git a/examples/rollup/public/index.html b/examples/rollup/public/index.html
@@ -5,6 +5,6 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
- <script src="build/bundle.js"></script>
+ <script type="module" src="build/index.js"></script>
  </body>
 </html>
diff --git a/examples/rollup/rollup.config.js b/examples/rollup/rollup.config.js
@@ -10,9 +10,8 @@ export default {
  input: "src/index.ts",
  output: {
  sourcemap: true,
- format: "iife",
- name: "app",
- file: "public/build/bundle.js",
+ format: "es",
+ dir: 'public/build',
  },
  plugins: [
  svelte({

diff --git a/examples/rollup/src/App.svelte b/examples/rollup/src/App.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
- import { Highlight, HighlightAuto } from "svelte-highlight";
+ import { Highlight } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+ import DynamicImport from "./DynamicImport.svelte";
 
  const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -12,4 +13,4 @@
 
 <Highlight language={typescript} {code} />
 
-<HighlightAuto langtag code={`body {\n padding: 0;\n color: red;\n}`} />
+<DynamicImport />
diff --git a/examples/rollup/src/DynamicImport.svelte b/examples/rollup/src/DynamicImport.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+
+ let component;
+ let styles;
+
+ onMount(async () => {
+ component = (await import("svelte-highlight")).HighlightAuto;
+ styles = (await import("svelte-highlight/styles/atom-one-dark")).default;
+ });
+</script>
+
+<svelte:head>
+ {#if styles}
+ {@html styles}
+ {/if}
+</svelte:head>
+
+<svelte:component
+ this={component}
+ langtag
+ code={`body {\n padding: 0;\n color: red;\n}`}
+/>
diff --git a/examples/sveltekit/src/routes/DynamicImport.svelte b/examples/sveltekit/src/routes/DynamicImport.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+
+ let component;
+ let styles;
+
+ onMount(async () => {
+ component = (await import("svelte-highlight")).HighlightAuto;
+ styles = (await import("svelte-highlight/styles/atom-one-dark")).default;
+ });
+</script>
+
+<svelte:head>
+ {#if styles}
+ {@html styles}
+ {/if}
+</svelte:head>
+
+<svelte:component
+ this={component}
+ langtag
+ code={`body {\n padding: 0;\n color: red;\n}`}
+/>
diff --git a/examples/sveltekit/src/routes/index.svelte b/examples/sveltekit/src/routes/index.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
- import { Highlight, HighlightAuto } from "svelte-highlight";
+ import { Highlight } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+ import DynamicImport from "./DynamicImport.svelte";
 
  const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -12,4 +13,4 @@
 
 <Highlight language={typescript} {code} />
 
-<HighlightAuto langtag code={`body {\n padding: 0;\n color: red;\n}`} />
+<DynamicImport />
diff --git a/examples/vite/src/App.svelte b/examples/vite/src/App.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
- import { Highlight, HighlightAuto } from "svelte-highlight";
+ import { Highlight } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+ import DynamicImport from "./DynamicImport.svelte";
 
  const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -12,4 +13,4 @@
 
 <Highlight language={typescript} {code} />
 
-<HighlightAuto langtag code={`body {\n padding: 0;\n color: red;\n}`} />
+<DynamicImport />
diff --git a/examples/vite/src/DynamicImport.svelte b/examples/vite/src/DynamicImport.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+
+ let component;
+ let styles;
+
+ onMount(async () => {
+ component = (await import("svelte-highlight")).HighlightAuto;
+ styles = (await import("svelte-highlight/styles/atom-one-dark")).default;
+ });
+</script>
+
+<svelte:head>
+ {#if styles}
+ {@html styles}
+ {/if}
+</svelte:head>
+
+<svelte:component
+ this={component}
+ langtag
+ code={`body {\n padding: 0;\n color: red;\n}`}
+/>
diff --git a/examples/webpack/src/App.svelte b/examples/webpack/src/App.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
- import { Highlight, HighlightAuto } from "svelte-highlight";
+ import { Highlight } from "svelte-highlight";
  import typescript from "svelte-highlight/languages/typescript";
  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+ import DynamicImport from "./DynamicImport.svelte";
 
  const code = "const add = (a: number, b: number) => a + b;";
 </script>
@@ -12,4 +13,4 @@
 
 <Highlight language={typescript} {code} />
 
-<HighlightAuto langtag code={`body {\n padding: 0;\n color: red;\n}`} />
+<DynamicImport />
diff --git a/examples/webpack/src/DynamicImport.svelte b/examples/webpack/src/DynamicImport.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+ import { onMount } from "svelte";
+
+ let component;
+ let styles;
+
+ onMount(async () => {
+ component = (await import("svelte-highlight")).HighlightAuto;
+ styles = (await import("svelte-highlight/styles/atom-one-dark")).default;
+ });
+</script>
+
+<svelte:head>
+ {#if styles}
+ {@html styles}
+ {/if}
+</svelte:head>
+
+<svelte:component
+ this={component}
+ langtag
+ code={`body {\n padding: 0;\n color: red;\n}`}
+/>