Squashed commit of the following:

commit 26eca32
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Tue Apr 15 00:13:33 2025 +1200

    Lazy load themes

commit bc54006
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 23:59:44 2025 +1200

    Lazy load source indicator

commit c5951c9
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 23:53:28 2025 +1200

    Remove rimraf

commit cea35df
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 23:42:25 2025 +1200

    Update scripts and vite config

commit a49d5a4
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 18:02:33 2025 +1200

    Linter fixes

commit 0828ac8
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 17:34:56 2025 +1200

    Bunch of linter fixes

commit fa55ab9
Author: Carl Smith <5456533+CarlosNZ@users.noreply.github.com>
Date:   Mon Apr 14 16:17:06 2025 +1200

    Install and configure ESlint

Author: CarlosNZ

.eslintignore

@@ -5,20 +5,19 @@
   "type": "module",
   "homepage": "https://carlosnz.github.io/json-edit-react",
   "scripts": {
-    "prepareLaunch": "rimraf ./src/json-edit-react && mkdir ./src/json-edit-react && mkdir ./src/json-edit-react/src && node src/imports/swap_import.cjs",
-    "launch": "concurrently --kill-others-on-fail  \"vite\" \"nodemon watch.cjs\"",
+    "prepareLaunch": "node scripts/prepareLaunch.mjs && node src/imports/swapImport.mjs",
+    "launch": "concurrently --kill-others-on-fail \"vite\" \"nodemon watch.mjs\"",
     "start": "yarn prepareLaunch && yarn launch",
     "start:package": "cross-env VITE_JRE_SOURCE=package yarn prepareLaunch && VITE_JRE_SOURCE=package yarn launch",
     "dev": "cross-env VITE_JRE_SOURCE=local yarn prepareLaunch && VITE_JRE_SOURCE=local yarn launch",
-    "build": "node src/imports/swap_import.cjs && tsc -b && vite build",
+    "build": "node src/imports/swapImport.mjs && tsc -b && vite build",
     "build-local": "yarn build --base=/",
-    "prebuild": "node ./scripts/getVersion.cjs",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d build",
     "lint": "eslint .",
     "serve": "vite preview",
     "serve-local": "vite preview --base=/",
-    "check": "tsc -b --noEmit"
+    "compile": "tsc -b --noEmit"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
@@ -46,6 +45,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.11.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
@@ -55,11 +55,11 @@
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
+    "fs-extra": "^11.3.0",
     "gh-pages": "^6.1.1",
     "globals": "^15.15.0",
     "node-fetch": "^3.3.2",
     "nodemon": "^3.0.3",
-    "rimraf": "^6.0.1",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0"

.eslintrc.js

@@ -0,0 +1,6 @@
+import path from 'path'
+import fs from 'fs-extra'
+
+fs.emptyDirSync('./src/json-edit-react')
+fs.copySync(path.join('..', 'src'), path.join('src', 'json-edit-react', 'src'))
+fs.copySync(path.join('..', 'package.json'), path.join('src', 'json-edit-react', 'package.json'))

demo/package.json

@@ -9,17 +9,9 @@ import {
   JsonData,
   OnErrorFunction,
   defaultTheme,
-  // Additional Themes
-  githubDarkTheme,
-  githubLightTheme,
-  monoLightTheme,
-  monoDarkTheme,
-  candyWrapperTheme,
-  psychedelicTheme,
   // ExternalTriggers,
   // type CollapseState
 } from './imports'
-import SourceIndicator from './SourceIndicator'
 import { FaNpm, FaExternalLinkAlt, FaGithub } from 'react-icons/fa'
 import { BiReset } from 'react-icons/bi'
 import { AiOutlineCloudUpload } from 'react-icons/ai'
@@ -55,10 +47,10 @@ import { ArrowBackIcon, ArrowForwardIcon, InfoIcon } from '@chakra-ui/icons'
 import { demoDataDefinitions } from './demoData'
 import { useDatabase } from './useDatabase'
 import './style.css'
-import { timestamp, version } from './version'
 import { getLineHeight, truncate } from './helpers'
 
 const CodeEditor = lazy(() => import('./CodeEditor'))
+const SourceIndicator = lazy(() => import('./SourceIndicator'))
 
 interface AppState {
   rootName: string
@@ -79,18 +71,23 @@ interface AppState {
   customTextEditor: boolean
 }
 
-const themes = [
-  defaultTheme,
-  githubDarkTheme,
-  githubLightTheme,
-  monoLightTheme,
-  monoDarkTheme,
-  candyWrapperTheme,
-  psychedelicTheme,
+// Additional themes are loaded dynamically when needed
+
+const themeNames = [
+  'Default',
+  'Github Dark',
+  'Github Light',
+  'White & Black',
+  'Black & White',
+  'Candy Wrapper',
+  'Psychedelic',
 ]
 
-console.log(`json-edit-react v${version}`)
-console.log('Site built:', timestamp)
+// Only default theme is loaded initially
+const themes = [defaultTheme]
+
+console.log(`json-edit-react v${__VERSION__}`)
+console.log(`Site built: ${__BUILD_TIME__}`)
 
 function App() {
   const navigate = useLocation()[1]
@@ -231,9 +228,39 @@ function App() {
     else navigate(`./?data=${selected}`)
   }
 
-  const handleThemeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const theme = themes.find((th) => th.displayName === e.target.value)
+  const handleThemeChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const themeName = e.target.value
+
+    // If theme is already loaded, use it
+    let theme = themes.find((th) => th.displayName === themeName)
+
+    // If theme is not loaded yet, load it using LazyThemes
+    if (!theme && themeName !== 'Default') {
+      try {
+        // Create a function name for the getter based on theme name
+        const functionName = `get${themeName.replace(/\s+&\s+|\s+/g, '')}Theme`
+
+        // Dynamically import the themes module
+        const lazyThemesModule = await import('./theme/LazyThemes')
+
+        // Get the theme using the themeGetters map
+        if (lazyThemesModule.themeGetters[functionName]) {
+          const newTheme = lazyThemesModule.themeGetters[functionName]()
+
+          // Add to available themes to avoid loading again
+          if (newTheme) {
+            themes.push(newTheme)
+            theme = newTheme
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load theme:', error)
+        return
+      }
+    }
+
     if (!theme) return
+
     updateState({ theme })
     if (selectedDataSet === 'editTheme') {
       setData(theme)
@@ -291,7 +318,10 @@ function App() {
         minH="100%"
       >
         <HStack w="100%" justify="space-between" align="flex-start">
-          <SourceIndicator />
+          <Suspense fallback={null}>
+            <SourceIndicator />
+          </Suspense>
+
           <VStack align="flex-start" gap={3}>
             <HStack align="flex-end" mt={2} gap={4} flexWrap="wrap">
               <Flex gap={4} align="center">
@@ -626,9 +656,9 @@ function App() {
                   </FormLabel>
                   <div className="inputWidth" style={{ flexGrow: 1 }}>
                     <Select id="themeSelect" onChange={handleThemeChange} value={theme.displayName}>
-                      {themes.map((theme) => (
-                        <option value={theme.displayName} key={theme.displayName}>
-                          {theme.displayName}
+                      {themeNames.map((themeName) => (
+                        <option value={themeName} key={themeName}>
+                          {themeName}
                         </option>
                       ))}
                     </Select>
@@ -826,7 +856,7 @@ function App() {
       </Flex>
       <Box h={50} />
       <footer>
-        <Text fontSize="sm">{`json-edit-react v${version}`}</Text>
+        <Text fontSize="sm">{`json-edit-react v${__VERSION__}`}</Text>
       </footer>
     </div>
   )

demo/scripts/getVersion.cjs

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react'
 import { data } from './data'
 import { Flex, Box, Link, Text, UnorderedList, ListItem } from '@chakra-ui/react'

demo/scripts/prepareLaunch.mjs

@@ -9,14 +9,14 @@
  *   to npm (import.published.ts)
  */
 
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
 
 // Read the provider from the environment variable
 const provider = process.env.VITE_JRE_SOURCE ?? 'published'
 
-const src = path.resolve(__dirname, `import.${provider}.ts`)
-const dest = path.resolve(__dirname, 'import.ts')
+const src = path.resolve('src/imports', `import.${provider}.ts`)
+const dest = path.resolve('src/imports', 'import.ts')
 
 if (!fs.existsSync(src)) {
   console.error(`❌ No file found for provider "${provider}". Expected at: ${src}`)

demo/src/App.tsx

@@ -0,0 +1,34 @@
+import {
+  githubDarkTheme,
+  githubLightTheme,
+  monoLightTheme,
+  monoDarkTheme,
+  candyWrapperTheme,
+  psychedelicTheme,
+  Theme
+} from '../imports'
+
+// This file contains functions that return theme objects
+// Each function is dynamically imported when needed to reduce initial bundle size
+
+export const getGithubDarkTheme = (): Theme => githubDarkTheme
+export const getGithubLightTheme = (): Theme => githubLightTheme
+export const getWhiteBlackTheme = (): Theme => monoLightTheme
+export const getBlackWhiteTheme = (): Theme => monoDarkTheme
+export const getCandyWrapperTheme = (): Theme => candyWrapperTheme
+export const getPsychedelicTheme = (): Theme => psychedelicTheme
+
+// Allow dynamic accessing of theme getter functions
+interface ThemeGetters {
+  [key: string]: () => Theme
+}
+
+// Export a map for safer dynamic access
+export const themeGetters: ThemeGetters = {
+  getGithubDarkTheme,
+  getGithubLightTheme,
+  getWhiteBlackTheme,
+  getBlackWhiteTheme,
+  getCandyWrapperTheme,
+  getPsychedelicTheme
+}