Add first svelte exploration - JSON explorer.

bennadel · Feb 22, 2024 · 76900a0 · 76900a0
1 parent d157a26
commit 76900a0
Show file tree

Hide file tree

Showing 20 changed files with 1,944 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [JSON Explorer In Svelte 4.2.10](https://bennadel.github.io/JavaScript-Demos/demos/json-explorer-svelte4/dist)
 * [Creating A Marquee Effect With CSS Animations](https://bennadel.github.io/JavaScript-Demos/demos/marquee-animations)
 * [Replacing RxJS With A State Machine In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/rxjs-to-state-machine)
 * [Using Labeled Loops In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/labeled-loops)

diff --git a/demos/json-explorer-svelte4/.gitignore b/demos/json-explorer-svelte4/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/demos/json-explorer-svelte4/dist/assets/index-BMJ7CJNN.js b/demos/json-explorer-svelte4/dist/assets/index-BMJ7CJNN.js
diff --git a/demos/json-explorer-svelte4/dist/assets/index-BUobxDjq.css b/demos/json-explorer-svelte4/dist/assets/index-BUobxDjq.css
diff --git a/demos/json-explorer-svelte4/dist/index.html b/demos/json-explorer-svelte4/dist/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>
+			JSON Explorer In Svelte 4.2.10
+		</title>
+		<script type="module" crossorigin src="./assets/index-BMJ7CJNN.js"></script>
+		<link rel="stylesheet" crossorigin href="./assets/index-BUobxDjq.css">
+	</head>
+	<body>
+		<div class="app-shell">
+			<!-- App will be loaded here. -->
+		</div>
+	</body>
+</html>
diff --git a/demos/json-explorer-svelte4/index.html b/demos/json-explorer-svelte4/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>
+			JSON Explorer In Svelte 4.2.10
+		</title>
+	</head>
+	<body>
+		<div class="app-shell">
+			<!-- App will be loaded here. -->
+		</div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/demos/json-explorer-svelte4/jsconfig.json b/demos/json-explorer-svelte4/jsconfig.json
@@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+		"moduleResolution": "bundler",
+		"target": "ESNext",
+		"module": "ESNext",
+		/**
+		 * svelte-preprocess cannot figure out whether you have
+		 * a value or a type, so tell TypeScript to enforce using
+		 * `import type` instead of `import` for Types.
+		 */
+		"verbatimModuleSyntax": true,
+		"isolatedModules": true,
+		"resolveJsonModule": true,
+		/**
+		 * To have warnings / errors of the Svelte compiler at the
+		 * correct position, enable source maps by default.
+		 */
+		"sourceMap": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		/**
+		 * Typecheck JS in `.svelte` and `.js` files by default.
+		 * Disable this if you'd like to use dynamic types.
+		 */
+		"checkJs": true
+	},
+	/**
+	 * Use global.d.ts instead of compilerOptions.types
+	 * to avoid limiting type declarations.
+	 */
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}