#139 Theme refactor (#140)

Move themes outside main bundle for better tree shaking

Author: CarlosNZ

README.md

@@ -26,7 +26,14 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
 <img width="392" alt="screenshot" src="image/screenshot.png">
 
 > [!IMPORTANT]
-> **Version 1.14.0** has a change which recommends you provide a `setData` prop and not use `onUpdate` for updating your data externally. See [Managing state](#managing-state).
+> Breaking changes:
+> - **Version 1.19.0** has a change to the `theme` input. Built-in themes must now
+> be imported separately and passed in, rather than just naming the theme as a
+> string. This is better for tree-shaking, so unused themes won't be bundled
+> with your build. See [Themes & Styles](#themes--styles)
+> - **Version 1.14.0** has a change which recommends you provide a `setData` prop
+> and not use `onUpdate` for updating your data externally. See [Managing
+> state](#managing-state).
 
 ## Contents  <!-- omit in toc -->
 - [Installation](#installation)
@@ -136,7 +143,7 @@ The only *required* value is `data` (although you will need to provide a `setDat
 | `defaultValue`          | `any\|DefaultValueFilterFunction`             | `null`                                    | When a new property is added, it is initialised with this value. A [function can be provided](#filter-functions) with the almost the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.) |
 | `stringTruncate`        | `number`                                      | `250`                                     | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing.                                                                                                                                                                                                        |
 | `translations`          | `LocalisedStrings` object                     | `{ }`                                     | UI strings (such as error messages) can be translated by passing an object containing localised string values (there are only a few). See [Localisation](#localisation)                                                                                                                                                                              |
-| `theme`                 | `string\|ThemeObject\|[string, ThemeObject]`  | `"default"`                               | Either the name of one of the built-in themes, or an object specifying some or all theme properties. See [Themes](#themes--styles).                                                                                                                                                                                                                  |
+| `theme`                 | `ThemeInput`                                  | `default`                                 | Either one of the built-in themes (imported separately), or an object specifying some or all theme properties. See [Themes](#themes--styles).                                                                                                                                                                                                        |
 | `className`             | `string`                                      |                                           | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward.                                                                                                                                                                                                                            |
 | `id`                    | `string`                                      |                                           | Name for the HTML `id` attribute on the main component container.                                                                                                                                                                                                                                                                                    |
 | `icons`                 | `{[iconName]: JSX.Element, ... }`             | `{ }`                                     | Replace the built-in icons by specifying them here. See [Themes](#themes--styles).                                                                                                                                                                                                                                                                   |  |
@@ -414,14 +421,31 @@ An example custom search function can be seen in the [Demo](#https://carlosnz.gi
 
 ## Themes & Styles
 
-There is a small selection of built-in themes (as seen in the [Demo app](https://carlosnz.github.io/json-edit-react/)). In order to use one of these, just pass the name into the `theme` prop (although realistically, these exist more to showcase the capabilities  — I'm open to better built-in themes, so feel free to [create an issue](https://github.com/CarlosNZ/json-edit-react/issues) with suggestions). The available themes are:
-- `default`
-- `githubDark`
-- `githubLight`
-- `monoDark`
-- `monoLight`
-- `candyWrapper`
-- `psychedelic`
+There is a small selection of built-in themes (as seen in the [Demo app](https://carlosnz.github.io/json-edit-react/)). In order to use one of these, just import it from the package and pass it as the theme prop:
+
+```js
+import { JsonEditor, githubDarkTheme } from 'json-edit-react'
+// ...other imports
+
+const MyApp = () => {
+  const [ data, setData ] = useState({ one: 1, two: 2 })
+
+  return <JsonEditor
+    data={data}
+    setData={setData}
+    theme={githubDarkTheme}
+    // other props...
+    />
+}
+```
+
+The following themes are available in the package (although realistically, these exist more to showcase the capabilities  — I'm open to better built-in themes, so feel free to [create an issue](https://github.com/CarlosNZ/json-edit-react/issues) with suggestions):
+- `githubDarkTheme`
+- `githubLightTheme`
+- `monoDarkTheme`
+- `monoLightTheme`
+- `candyWrapperTheme`
+- `psychedelicTheme`
 
 However, you can pass in your own theme object, or part thereof. The theme structure is as follows (this is the "default" theme definition):
 
@@ -471,7 +495,7 @@ For a simple example, if you want to use the "githubDark" theme, but just change
 ```js
 // in <JsonEditor /> props
 theme={[
-        'githubDark',
+        githubDarkTheme,
         {
             iconEdit: 'grey',
             boolean: { color: 'red', fontStyle: 'italic', fontWeight: 'bold', fontSize: '80%' },
@@ -488,7 +512,7 @@ Or you could create your own theme from scratch and overwrite the whole theme ob
 
 So, to summarise, the `theme` prop can take *either*:
 
-- a theme name e.g. `"candyWrapper"`
+- an imported theme, e.g `"candyWrapperTheme"`
 - a theme object:
   - can be structured as above with `fragments`, `styles`, `displayName` etc., or just the `styles` part (at the root level)
 - a theme name *and* an override object in an array, i.e. `[ "<themeName>, {...overrides } ]`
@@ -751,6 +775,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s
 
 ## Changelog
 
+- **1.19.0**: Built-in [themes](#themes--styles) must now be imported separately -- this improves tree-shaking to prevent unused themes being bundled with your build
 - **1.18.0**:
   - Ability to [customise keyboard controls](#keyboard-customisation)
   - Option to insert new values at the top

demo/package.json

@@ -18,7 +18,7 @@
     "ajv": "^8.16.0",
     "firebase": "^10.13.0",
     "framer-motion": "^11.0.3",
-    "json-edit-react": "^1.18.0",
+    "json-edit-react": "^1.19.0-beta1",
     "json5": "^2.2.3",
     "react": "^18.2.0",
     "react-datepicker": "^7.5.0",

demo/src/App.tsx

@@ -4,12 +4,18 @@ import JSON5 from 'json5'
 import 'react-datepicker/dist/react-datepicker.css'
 import {
   JsonEditor,
-  themes,
-  ThemeName,
   Theme,
   FilterFunction,
   JsonData,
   OnErrorFunction,
+  defaultTheme,
+  // Additional Themes
+  githubDarkTheme,
+  githubLightTheme,
+  monoLightTheme,
+  monoDarkTheme,
+  candyWrapperTheme,
+  psychedelicTheme,
 } from './_imports'
 import { FaNpm, FaExternalLinkAlt, FaGithub } from 'react-icons/fa'
 import { BiReset } from 'react-icons/bi'
@@ -53,7 +59,7 @@ interface AppState {
   collapseLevel: number
   collapseTime: number
   showCount: 'Yes' | 'No' | 'When closed'
-  theme: ThemeName | Theme
+  theme: Theme
   allowEdit: boolean
   allowDelete: boolean
   allowAdd: boolean
@@ -65,6 +71,16 @@ interface AppState {
   searchText: string
 }
 
+const themes = [
+  defaultTheme,
+  githubDarkTheme,
+  githubLightTheme,
+  monoLightTheme,
+  monoDarkTheme,
+  candyWrapperTheme,
+  psychedelicTheme,
+]
+
 function App() {
   const navigate = useLocation()[1]
   const searchString = useSearch()
@@ -78,7 +94,7 @@ function App() {
     collapseLevel: dataDefinition.collapse ?? 2,
     collapseTime: 300,
     showCount: 'When closed',
-    theme: 'default',
+    theme: defaultTheme,
     allowEdit: true,
     allowDelete: true,
     allowAdd: true,
@@ -91,15 +107,15 @@ function App() {
   })
 
   const [isSaving, setIsSaving] = useState(false)
-  const previousThemeName = useRef('') // Used when resetting after theme editing
+  const previousTheme = useRef<Theme>() // Used when resetting after theme editing
   const toast = useToast()
 
   const { liveData, loading, updateLiveData } = useDatabase()
 
   const [
     { present: data, past, future },
     { set: setData, reset, undo: undoData, redo: redoData, canUndo, canRedo },
-  ] = useUndo(selectedDataSet === 'editTheme' ? themes.default : dataDefinition.data)
+  ] = useUndo(selectedDataSet === 'editTheme' ? defaultTheme : dataDefinition.data)
   // Provides a named version of these methods (i.e undo.name = "undo")
   const undo = () => undoData()
   const redo = () => redoData()
@@ -166,8 +182,8 @@ function App() {
 
     switch (selected) {
       case 'editTheme':
-        previousThemeName.current = theme as string
-        reset(typeof theme === 'string' ? themes[theme] : theme)
+        previousTheme.current = theme
+        reset(theme)
         break
       case 'liveData':
         if (!liveData) reset({ 'Oops!': "We couldn't load this data, sorry " })
@@ -182,11 +198,12 @@ function App() {
   }
 
   const handleThemeChange = (e) => {
-    const selected = e.target.value
-    updateState({ theme: selected })
+    const theme = themes.find((th) => th.displayName === e.target.value)
+    if (!theme) return
+    updateState({ theme })
     if (selectedDataSet === 'editTheme') {
-      setData(themes[selected])
-      previousThemeName.current = selected
+      setData(theme)
+      previousTheme.current = theme
     }
   }
 
@@ -204,8 +221,8 @@ function App() {
 
     switch (selectedDataSet) {
       case 'editTheme':
-        reset(themes[previousThemeName.current])
-        newState.theme = themes[previousThemeName.current]
+        reset(previousTheme.current ?? defaultTheme)
+        newState.theme = previousTheme.current ?? defaultTheme
         break
       case 'liveData':
         setIsSaving(true)
@@ -468,14 +485,12 @@ function App() {
                     Theme
                   </FormLabel>
                   <div className="inputWidth" style={{ flexGrow: 1 }}>
-                    <Select id="themeSelect" onChange={handleThemeChange} value={theme}>
-                      {(Object.entries(themes) as [ThemeName, Theme][]).map(
-                        ([theme, { displayName }]) => (
-                          <option value={theme} key={theme}>
-                            {displayName}
-                          </option>
-                        )
-                      )}
+                    <Select id="themeSelect" onChange={handleThemeChange} value={theme.displayName}>
+                      {themes.map((theme) => (
+                        <option value={theme.displayName} key={theme.displayName}>
+                          {theme.displayName}
+                        </option>
+                      ))}
                     </Select>
                   </div>
                 </HStack>

demo/src/_imports.ts

@@ -10,3 +10,5 @@ export * from 'json-edit-react'
 
 /* Compiled local package */
 // export * from './package/build'
+
+// export * from './json-edit-react/src/additionalThemes/themes'

demo/src/version.ts

@@ -1 +1 @@
-export const version = '1.18.0'
+export const version = '1.19.0-beta1'

demo/tsconfig.json

@@ -9,8 +9,8 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

demo/yarn.lock

@@ -8114,13 +8114,13 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-edit-react@^1.18.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/json-edit-react/-/json-edit-react-1.18.0.tgz#396254d9e56e75e2ab0c0f104b6fa506bb77ad78"
-  integrity sha512-PJyaJfCWHf9qyAjgIBBeKfF8Vxl2GhfPaFP+Lw3tMfj5SNq81gnO5pU0M+mRUmkqVpYqmUiuipJeqwIKYFv2og==
+json-edit-react@^1.19.0-beta1:
+  version "1.19.0-beta1"
+  resolved "https://registry.yarnpkg.com/json-edit-react/-/json-edit-react-1.19.0-beta1.tgz#ea8930704c4b11304b760fef1257a7717e36c01c"
+  integrity sha512-8kCuXISfk3sOTC+P9UvWSYodDDnvLZB+robPhFM0Igh32L3BQo7pkvvhhvROEuWWbVabRhxeaJUa0FJ/ADXTfg==
   dependencies:
-    object-property-assigner "^1.3.1"
-    object-property-extractor "^1.0.12"
+    object-property-assigner "^1.3.5"
+    object-property-extractor "^1.0.13"
 
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
@@ -8734,12 +8734,12 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-property-assigner@^1.3.1:
+object-property-assigner@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/object-property-assigner/-/object-property-assigner-1.3.5.tgz#f5037ff73b7b015a42e4059c3ff5c84017413ca2"
   integrity sha512-DIzHzNSTnpoG8QPQCDNrHa6O3vLMhktK3Igirqpk523UYIVe8JNCKcn5C9WyLQxJc58EGsAIiiEu10gqPrud8w==
 
-object-property-extractor@^1.0.12:
+object-property-extractor@^1.0.13:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/object-property-extractor/-/object-property-extractor-1.0.13.tgz#fff188d6308ac5574eb2610221af906eb87b4f38"
   integrity sha512-9kgEjTWDhTPuPn7nyof+5mLmCKBPKdU0c7IVpTbOvYKYSdXQ5skH4Pa/8MPbZXeyXBGrqS82JyWecsh6tMxiLw==

package.json

@@ -1,11 +1,11 @@
 {
   "name": "json-edit-react",
-  "version": "1.18.0",
+  "version": "1.19.0-beta1",
   "description": "React component for editing or viewing JSON/object data",
   "main": "build/index.cjs.js",
   "module": "build/index.esm.js",
-  "sideEffects": false,
   "types": "build/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./build/index.d.ts",
@@ -45,6 +45,7 @@
     "object-property-extractor": "^1.0.13"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.11.17",

rollup.config.mjs

@@ -7,6 +7,7 @@ import bundleSize from 'rollup-plugin-bundle-size'
 import sizes from 'rollup-plugin-sizes'
 
 export default [
+  // Main Package
   {
     input: 'src/index.ts',
     output: [
@@ -29,6 +30,7 @@ export default [
     ],
     external: ['object-property-assigner', 'object-property-extractor'],
   },
+  // Types
   {
     input: './build/dts/index.d.ts',
     output: [{ file: 'build/index.d.ts', format: 'es' }],

src/ButtonPanels.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Icon } from './Icons'
-import { useTheme } from './theme'
+import { useTheme } from './contexts'
 import { type TranslateFunction } from './localisation'
 import {
   type CollectionKey,