%sveltekit.body%
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/lib/doc-components/Nav.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
23 |
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/codemirror.ts:
--------------------------------------------------------------------------------
1 | import CodeMirror from 'codemirror';
2 | import 'codemirror/lib/codemirror.css';
3 | import 'codemirror/theme/dracula.css';
4 |
5 | import 'codemirror/mode/javascript/javascript.js';
6 | import 'codemirror/mode/handlebars/handlebars.js';
7 | import 'codemirror/mode/htmlmixed/htmlmixed.js';
8 | import 'codemirror/mode/xml/xml.js';
9 | import 'codemirror/mode/css/css.js';
10 | import 'codemirror/addon/edit/closebrackets.js';
11 | import 'codemirror/addon/edit/closetag.js';
12 | import 'codemirror/addon/edit/continuelist.js';
13 | import 'codemirror/addon/comment/comment.js';
14 | import 'codemirror/addon/fold/foldcode.js';
15 | import 'codemirror/addon/fold/foldgutter.js';
16 | import 'codemirror/addon/fold/brace-fold.js';
17 | import 'codemirror/addon/fold/xml-fold.js';
18 | import 'codemirror/addon/fold/indent-fold.js';
19 | import 'codemirror/addon/fold/markdown-fold.js';
20 | import 'codemirror/addon/fold/comment-fold.js';
21 |
22 | export default CodeMirror;
23 |
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/index.svelte:
--------------------------------------------------------------------------------
1 |
88 |
89 |
90 |
111 |
112 |
165 |
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/errors.text:
--------------------------------------------------------------------------------
1 | new Error('Error')
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/functions.text:
--------------------------------------------------------------------------------
1 | [
2 | function sum (a, b) { return a + b },
3 | async (promises) => await Promise.all(promises),
4 | function *generator (a) {
5 | while (a--) {
6 | yield a;
7 | }
8 | }
9 | ]
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/maps.text:
--------------------------------------------------------------------------------
1 | new Map([
2 | ["name", "svelte-json-tree"],
3 | ["license", "MIT"],
4 | ["elements", new Set(["svelte", 123, false, true, null, undefined, 456n])],
5 | ["nested", new Map([
6 | ["taglines", new Set([
7 | { name: 'svelte', feature: 'write less code' },
8 | { name: 'svelte', feature: 'no virtual dom' },
9 | { name: 'svelte', feature: 'truly reactive' }
10 | ])],
11 | ["tutorials", new Set([
12 | {
13 | type: 'category',
14 | label: '1. Introduction',
15 | items: [
16 | { id: 'basics', label: 'a. Basics' },
17 | { id: 'adding-data', label: 'b. Adding data' },
18 | ],
19 | },
20 | {
21 | type: 'category',
22 | label: '2. Reactivity',
23 | items: [
24 | { id: 'reactive-assignments', label: 'a. Assignments' },
25 | { id: 'reactive-declarations', label: 'b. Declarations' },
26 | ],
27 | },
28 | ])],
29 | ])]
30 | ])
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/objects.text:
--------------------------------------------------------------------------------
1 | {
2 | name: "svelte-json-tree",
3 | license: "MIT",
4 | elements: ["svelte", 123, false, true, null, undefined, 456n],
5 | nested: {
6 | taglines: [
7 | { name: 'svelte', feature: 'write less code' },
8 | { name: 'svelte', feature: 'no virtual dom' },
9 | { name: 'svelte', feature: 'truly reactive' }
10 | ],
11 | tutorials: [
12 | {
13 | type: 'category',
14 | label: '1. Introduction',
15 | items: [
16 | { id: 'basics', label: 'a. Basics' },
17 | { id: 'adding-data', label: 'b. Adding data' },
18 | { id: 'dynamic-attributes', label: 'c. Dynamic attributes' },
19 | ],
20 | },
21 | {
22 | type: 'category',
23 | label: '18. Debugging',
24 | items: [{ id: 'debug', label: 'a. The @debug tag' }],
25 | },
26 | ]
27 | }
28 | }
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/regex.text:
--------------------------------------------------------------------------------
1 | {
2 | regex: /^[a-z0-9]+/g,
3 | case_insensitive: /^(?:[a-z0-9]+)foo.*?/i,
4 | }
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/simple.text:
--------------------------------------------------------------------------------
1 | {
2 | message: 'hello world',
3 | item: [1, 2, 3],
4 | }
--------------------------------------------------------------------------------
/src/lib/doc-components/Playground/snippets/store.text:
--------------------------------------------------------------------------------
1 | [
2 | writable(1),
3 | readable({ a: 1 }),
4 | derived(writable(1), $a => $a * 2),
5 | ]
--------------------------------------------------------------------------------
/src/lib/svelte-json-tree/SvelteJsonTree/ErrorNode.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
91 |
109 |
92 |
93 |
94 |
95 |
96 |
97 |
106 |
107 |
108 | 16 | {/each} 17 | {:else} 18 |
-
60 | {#each keys as key, index}
61 |
62 |
- {}}>
63 |
64 | 65 | child_expanded[index].update((value) => !value)}> 66 | 69 |{#if !shouldShowColon || shouldShowColon(key)}:{/if} 67 | 68 |
70 | {/each}
71 |
-
30 |
svelte-json-tree
6 | 7 | 16 | 17 |
10 | 
14 |
64 |
85 | ```
86 |
87 | **Result**
88 |
89 |
90 |
92 |
93 | ### Default expanded nodes
94 |
95 | Expand by paths
96 |
97 | ```svelte
98 |
117 |
118 |
45 |
52 |
53 |
82 |
--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true
--------------------------------------------------------------------------------
/static/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rich-Harris/svelte-json-tree/a19b90dfe7924611f24dcc46208e8d17062d74fe/static/.nojekyll
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rich-Harris/svelte-json-tree/a19b90dfe7924611f24dcc46208e8d17062d74fe/static/favicon.png
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { mdsvex } from 'mdsvex';
2 | import mdsvexConfig from './mdsvex.config.js';
3 | import { vitePreprocess } from '@sveltejs/kit/vite';
4 | import adapter from '@sveltejs/adapter-static';
5 |
6 | const dev = process.env.NODE_ENV === 'development';
7 |
8 | let highlighter;
9 |
10 | /** @type {import('@sveltejs/kit').Config} */
11 | const config = {
12 | extensions: ['.svelte', ...mdsvexConfig.extensions],
13 | preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
14 | kit: {
15 | paths: {
16 | assets: 'https://lihautan.com/svelte-json-tree',
17 | base: dev ? '' : '/svelte-json-tree',
18 | },
19 | adapter: adapter({
20 | fallback: null,
21 | }),
22 | prerender: {
23 | entries: ['*'],
24 | crawl: false,
25 | },
26 | },
27 | };
28 |
29 | export default config;
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "moduleResolution": "node",
5 | "module": "es2020",
6 | "lib": [
7 | "es2020",
8 | "DOM"
9 | ],
10 | "target": "es2020",
11 | /**
12 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
13 | to enforce using \`import type\` instead of \`import\` for Types.
14 | */
15 | "importsNotUsedAsValues": "error",
16 | "isolatedModules": true,
17 | "resolveJsonModule": true,
18 | /**
19 | To have warnings/errors of the Svelte compiler at the correct position,
20 | enable source maps by default.
21 | */
22 | "sourceMap": true,
23 | "esModuleInterop": true,
24 | "skipLibCheck": true,
25 | "forceConsistentCasingInFileNames": true,
26 | "baseUrl": ".",
27 | "allowJs": true,
28 | "checkJs": true,
29 | "paths": {
30 | "$lib": [
31 | "src/lib"
32 | ],
33 | "$lib/*": [
34 | "src/lib/*"
35 | ]
36 | }
37 | },
38 | "include": [
39 | "src/**/*.d.ts",
40 | "src/**/*.js",
41 | "src/**/*.ts",
42 | "src/**/*.svelte"
43 | ]
44 | }
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { svelte } from '@sveltejs/vite-plugin-svelte';
3 | import { defineConfig } from 'vite';
4 | import process from 'node:process';
5 |
6 | const BUILD_MODE = process.env.BUILD_MODE;
7 |
8 | let config;
9 | if (BUILD_MODE === 'standalone') {
10 | config = defineConfig({
11 | build: {
12 | outDir: 'dist/standalone',
13 | lib: {
14 | entry: 'dist/lib/index.js',
15 | name: 'SvelteJsonTree',
16 | fileName: (format) => `${format}/index.js`,
17 | formats: ['umd', 'es'],
18 | },
19 | },
20 | plugins: [svelte({ extensions: ['.svelte'], emitCss: false })],
21 | });
22 | } else if (BUILD_MODE === 'bundled') {
23 | config = defineConfig({
24 | build: {
25 | outDir: 'dist/esm',
26 | lib: {
27 | entry: 'dist/lib/index.js',
28 | name: 'SvelteJsonTree',
29 | fileName: 'index',
30 | formats: ['es'],
31 | },
32 | rollupOptions: {
33 | external: [
34 | 'svelte',
35 | 'svelte/animate',
36 | 'svelte/easing',
37 | 'svelte/internal',
38 | 'svelte/motion',
39 | 'svelte/store',
40 | 'svelte/transition',
41 | 'svelte/ssr',
42 | ],
43 | },
44 | },
45 | plugins: [svelte({ extensions: ['.svelte'], emitCss: false })],
46 | });
47 | } else {
48 | config = defineConfig({
49 | plugins: [sveltekit()]
50 | });
51 | }
52 |
53 | export default config;
--------------------------------------------------------------------------------
46 |
47 |
48 |
49 |
51 |