layerchart 2.0.0-next.35 → 2.0.0-next.37

package/dist/components/charts/ArcChart.svelte

@@ -367,7 +367,6 @@
   bind:context
   data={visibleData}
   x={value}
-  y={key}
   {c}
   cDomain={chartData.map(keyAccessor)}
   cRange={seriesColors.length

package/dist/components/charts/PieChart.svelte

@@ -392,7 +392,6 @@
   bind:context
   data={visibleData}
   x={value}
-  y={key}
   c={key}
   cDomain={chartData.map(keyAccessor)}
   cRange={seriesColors.length

package/dist/docs/Code.svelte

@@ -1,46 +1,80 @@
+<script module>
+  import { createHighlighter } from 'shiki';
+
+  const highlighter = createHighlighter({
+    themes: ['github-light-default', 'github-dark-default'],
+    langs: ['svelte', 'javascript', 'ts', 'typescript', 'json', 'sh'],
+  });
+</script>
+
 <script lang="ts">
-  import Prism from 'prismjs';
-  import 'prism-svelte';
   import { CopyButton } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props {
+    source?: string | null;
+    language?: string;
+    classes?: { root?: string; pre?: string; code?: string };
+  }
 
-  const {
+  let {
     source = null,
     language = 'svelte',
-    highlightedSource = source
-      ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
-      : '',
     classes = {},
     class: className,
-  }: {
-    source: string | null;
-    language?: string;
-    highlightedSource?: string;
-    classes?: {
-      root?: string;
-      pre?: string;
-      code?: string;
-    };
-    class?: string;
-  } = $props();
+  }: Props & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class={cls('Code', 'rounded-sm', classes.root, className)}>
+<div
+  class={cls(
+    'Code',
+    'relative bg-surface-200 dark:bg-surface-300 p-4 overflow-auto not-prose',
+    classes.root,
+    className
+  )}
+>
   {#if source}
-    <div class="relative">
-      <pre
-        class={cls('language-{language} rounded-sm', classes.pre)}
-        style="margin: 0; white-space: normal;">
-          <code class={cls('language-{language}', classes.code)}>{@html highlightedSource}</code>
-      </pre>
-
-      <div class="absolute top-0 right-0 p-2 z-10">
-        <CopyButton
-          value={source ?? ''}
-          class="text-white/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
-          size="sm"
-        />
-      </div>
+    <pre class={cls('whitespace-normal overflow-auto', classes.pre)}>
+      <code class={cls('text-xs', classes.code)}>
+        {#await highlighter}
+          <div>Loading...</div>
+        {:then h}
+          {@html h.codeToHtml(source, {
+            lang: language,
+            themes: {
+              light: 'github-light-default',
+              dark: 'github-dark-default',
+            },
+          })}
+        {:catch error}
+          <div class="text-red-500">Error loading code highlighting: {error.message}</div>
+        {/await}
+
+      </code>
+    </pre>
+
+    <div class="absolute top-0 right-0 p-2 z-10">
+      <CopyButton
+        value={source ?? ''}
+        class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
+        size="sm"
+      />
     </div>
   {/if}
 </div>
+
+<style>
+  :global(.shiki) {
+    background-color: transparent !important;
+  }
+
+  :global(html.dark .shiki),
+  :global(html.dark .shiki span) {
+    color: var(--shiki-dark) !important;
+    /* background-color: var(--shiki-dark-bg) !important; */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+</style>

package/dist/docs/Code.svelte.d.ts

@@ -1,15 +1,14 @@
-import 'prism-svelte';
-type $$ComponentProps = {
-    source: string | null;
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    source?: string | null;
     language?: string;
-    highlightedSource?: string;
     classes?: {
         root?: string;
         pre?: string;
         code?: string;
     };
-    class?: string;
-};
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/docs/Preview.svelte

@@ -1,9 +1,5 @@
 <script lang="ts">
   import { slide } from 'svelte/transition';
-  // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
-  import Prism from 'prismjs';
-  import 'prism-svelte';
-
   import LucideCode from '~icons/lucide/code';
   import LucideTable from '~icons/lucide/table';
 
@@ -12,25 +8,25 @@
 
   import Code from './Code.svelte';
   import Json from './Json.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
-  let {
-    code,
-    data,
-    language = 'svelte',
-    highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '',
-    showCode = false,
-    class: className,
-    children,
-  }: {
+  interface Props {
+    children: Snippet;
     code?: string;
     data?: any;
     language?: string;
-    highlightedCode?: string;
     showCode?: boolean;
-    class?: string | null;
-    children: Snippet;
-  } = $props();
+  }
+
+  let {
+    children,
+    code = undefined,
+    data = undefined,
+    language = 'svelte',
+    showCode = false,
+    class: className,
+  }: Props & HTMLAttributes<HTMLDivElement> = $props();
 
   /**
    * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
@@ -56,14 +52,14 @@
   }
 </script>
 
-<div class={cls('Preview border rounded-sm bg-surface-100', className)}>
+<div class={cls('Preview border rounded bg-surface-100', className)}>
   <div class="p-4">
-    {@render children?.()}
+    {@render children()}
   </div>
 
   {#if code && showCode}
-    <div transition:slide class="bg-surface-200">
-      <Code source={code} highlightedSource={highlightedCode} classes={{ pre: 'rounded-t-none' }} />
+    <div transition:slide class="border-t">
+      <Code source={code} {language} />
     </div>
   {/if}
 </div>

package/dist/docs/Preview.svelte.d.ts

@@ -1,14 +1,13 @@
-import 'prism-svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+interface Props {
+    children: Snippet;
     code?: string;
     data?: any;
     language?: string;
-    highlightedCode?: string;
     showCode?: boolean;
-    class?: string | null;
-    children: Snippet;
-};
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
 declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
 type Preview = ReturnType<typeof Preview>;
 export default Preview;

package/dist/docs/ViewSourceButton.svelte

@@ -35,7 +35,7 @@
         {/if}
       </div>
 
-      <div class="overflow-auto">
+      <div class="overflow-auto border-t">
         <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
       </div>
 

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.35",
+  "version": "2.0.0-next.37",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.48",
@@ -35,7 +35,6 @@
     "@types/d3-shape": "^3.1.7",
     "@types/d3-time": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
-    "@types/prismjs": "^1.26.5",
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.5",
     "@types/topojson-simplify": "^3.0.3",
@@ -45,12 +44,10 @@
     "posthog-js": "^1.252.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "prism-svelte": "^0.5.0",
-    "prism-themes": "^1.9.0",
-    "prismjs": "^1.30.0",
     "rehype-slug": "^6.0.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "shapefile": "^0.6.6",
+    "shiki": "^3.9.2",
     "solar-calculator": "^0.3.0",
     "svelte": "5.34.1",
     "svelte-check": "^4.2.1",