Skip to content

Commit 19cc7e6

Browse files
cloydlaucloydlau
committed
docs: provide example for CDN with global build usage
1 parent 7dbcaca commit 19cc7e6

File tree

2 files changed

+450
-166
lines changed

2 files changed

+450
-166
lines changed

‎README.md

Lines changed: 225 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -77,35 +77,81 @@ createApp()
7777

7878
#### CDN
7979

80-
> Native ESM only (at present), see https://github.com/josdejong/svelte-jsoneditor/pull/195.
80+
##### Using the ESM Build
8181

8282
```html
83-
<div id="app">
84-
<json-editor-vue v-model="value"></json-editor-vue>
85-
<p v-text="value"></p>
86-
</div>
87-
88-
<script type="importmap">
89-
{
90-
"imports": {
91-
"vue": "https://unpkg.com/vue/dist/vue.esm-browser.prod.js",
92-
"vue-demi": "https://unpkg.com/vue-demi/lib/v3/index.mjs",
93-
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
94-
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
83+
<!DOCTYPE html>
84+
<html lang="en">
85+
86+
<head>
87+
<meta charset="UTF-8" />
88+
</head>
89+
90+
<body>
91+
<div id="app">
92+
<json-editor-vue v-model="value"></json-editor-vue>
93+
</div>
94+
95+
<script type="importmap">
96+
{
97+
"imports": {
98+
"vue": "https://unpkg.com/vue/dist/vue.esm-browser.prod.js",
99+
"vue-demi": "https://unpkg.com/vue-demi/lib/v3/index.mjs",
100+
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
101+
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
102+
}
95103
}
96-
}
97-
</script>
98-
<script type="module">
99-
import { createApp, ref } from 'vue'
100-
import JsonEditorVue from 'json-editor-vue'
104+
</script>
105+
<script type="module">
106+
import { createApp, ref } from 'vue'
107+
import JsonEditorVue from 'json-editor-vue'
108+
109+
createApp({
110+
setup: () => ({
111+
value: ref()
112+
})
113+
}).use(JsonEditorVue)
114+
.mount('#app')
115+
</script>
116+
</body>
101117

102-
createApp({
103-
setup: () => ({
104-
value: ref()
105-
})
106-
}).use(JsonEditorVue)
107-
.mount('#app')
108-
</script>
118+
</html>
119+
```
120+
121+
##### Using the Global Build
122+
123+
> Not yet supported because `vanilla-jsoneditor` does not export UMD, please leave a message [here](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
124+
125+
```html
126+
<!DOCTYPE html>
127+
<html lang="en">
128+
129+
<head>
130+
<meta charset="UTF-8" />
131+
</head>
132+
133+
<body>
134+
<div id="app">
135+
<json-editor-vue v-model="value"></json-editor-vue>
136+
</div>
137+
138+
<script src="https://unpkg.com/vue"></script>
139+
<script src="https://unpkg.com/vue-demi"></script>
140+
<!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
141+
<script src="https://unpkg.com/json-editor-vue"></script>
142+
<script>
143+
const { createApp, ref } = Vue
144+
145+
createApp({
146+
setup: () => ({
147+
value: ref(),
148+
}),
149+
}).component('json-editor-vue', JsonEditorVue)
150+
.mount('#app')
151+
</script>
152+
</body>
153+
154+
</html>
109155
```
110156

111157
<br>
@@ -143,37 +189,83 @@ Vue.use(JsonEditorVue, {
143189

144190
#### CDN
145191

146-
> Native ESM only (at present), see https://github.com/josdejong/svelte-jsoneditor/pull/195.
192+
##### Using the ESM Build
147193

148194
```html
149-
<div id="app">
150-
<json-editor-vue v-model="value"></json-editor-vue>
151-
<p v-text="value"></p>
152-
</div>
153-
154-
<script type="importmap">
155-
{
156-
"imports": {
157-
"vue": "https://unpkg.com/vue@2/dist/vue.esm.browser.min.js",
158-
"vue-demi": "https://unpkg.com/vue-demi/lib/v2.7/index.mjs",
159-
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
160-
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
161-
}
162-
}
163-
</script>
164-
<script type="module">
165-
import Vue from 'vue'
166-
import JsonEditorVue from 'json-editor-vue'
167-
168-
new Vue({
169-
components: { JsonEditorVue },
170-
data() {
171-
return {
172-
value: undefined,
195+
<!DOCTYPE html>
196+
<html lang="en">
197+
198+
<head>
199+
<meta charset="UTF-8" />
200+
</head>
201+
202+
<body>
203+
<div id="app">
204+
<json-editor-vue v-model="value"></json-editor-vue>
205+
</div>
206+
207+
<script type="importmap">
208+
{
209+
"imports": {
210+
"vue": "https://unpkg.com/vue@2/dist/vue.esm.browser.min.js",
211+
"vue-demi": "https://unpkg.com/vue-demi/lib/v2.7/index.mjs",
212+
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
213+
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
173214
}
174-
},
175-
}).$mount('#app')
176-
</script>
215+
}
216+
</script>
217+
<script type="module">
218+
import Vue from 'vue'
219+
import JsonEditorVue from 'json-editor-vue'
220+
221+
new Vue({
222+
components: { JsonEditorVue },
223+
data() {
224+
return {
225+
value: undefined,
226+
}
227+
},
228+
}).$mount('#app')
229+
</script>
230+
</body>
231+
232+
</html>
233+
```
234+
235+
##### Using the Global Build
236+
237+
> Not yet supported because `vanilla-jsoneditor` does not export UMD, please leave a message [here](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
238+
239+
```html
240+
<!DOCTYPE html>
241+
<html lang="en">
242+
243+
<head>
244+
<meta charset="UTF-8" />
245+
</head>
246+
247+
<body>
248+
<div id="app">
249+
<json-editor-vue v-model="value"></json-editor-vue>
250+
</div>
251+
252+
<script src="https://unpkg.com/vue@2"></script>
253+
<script src="https://unpkg.com/vue-demi"></script>
254+
<!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
255+
<script src="https://unpkg.com/json-editor-vue"></script>
256+
<script>
257+
new Vue({
258+
components: { 'json-editor-vue': JsonEditorVue },
259+
data() {
260+
return {
261+
value: undefined,
262+
}
263+
},
264+
}).$mount('#app')
265+
</script>
266+
</body>
267+
268+
</html>
177269
```
178270

179271
<br>
@@ -224,41 +316,91 @@ Vue.use(JsonEditorVue, {
224316

225317
#### CDN
226318

227-
> Native ESM only (at present), see https://github.com/josdejong/svelte-jsoneditor/pull/195.
319+
##### Using the ESM Build
228320

229321
```html
230-
<div id="app">
231-
<json-editor-vue v-model="value"></json-editor-vue>
232-
<p v-text="value"></p>
233-
</div>
234-
235-
<script>
236-
window.process = { env: { NODE_ENV: 'production' } }
237-
</script>
238-
<script type="importmap">
239-
{
240-
"imports": {
241-
"vue": "https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js",
242-
"@vue/composition-api": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
243-
"@vue/composition-api/dist/vue-composition-api.mjs": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
244-
"vue-demi": "https://unpkg.com/vue-demi/lib/v2/index.mjs",
245-
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
246-
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
322+
<!DOCTYPE html>
323+
<html lang="en">
324+
325+
<head>
326+
<meta charset="UTF-8" />
327+
</head>
328+
329+
<body>
330+
<div id="app">
331+
<json-editor-vue v-model="value"></json-editor-vue>
332+
</div>
333+
334+
<script>
335+
window.process = { env: { NODE_ENV: 'production' } }
336+
</script>
337+
<script type="importmap">
338+
{
339+
"imports": {
340+
"vue": "https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js",
341+
"@vue/composition-api": "https://unpkg.com/@vue/composition-api/dist/vue-composition-api.mjs",
342+
"@vue/composition-api/dist/vue-composition-api.mjs": "https://unpkg.com/@vue/composition-api/dist/ vue-composition-api.mjs",
343+
"vue-demi": "https://unpkg.com/vue-demi/lib/v2/index.mjs",
344+
"vanilla-jsoneditor": "https://unpkg.com/vanilla-jsoneditor",
345+
"json-editor-vue": "https://unpkg.com/[email protected]/dist/json-editor-vue.mjs"
346+
}
247347
}
248-
}
249-
</script>
250-
<script type="module">
251-
import { createApp, ref } from '@vue/composition-api'
252-
import JsonEditorVue from 'json-editor-vue'
348+
</script>
349+
<script type="module">
350+
import { createApp, ref } from '@vue/composition-api'
351+
import JsonEditorVue from 'json-editor-vue'
352+
353+
const app = createApp({
354+
setup: () => ({
355+
value: ref()
356+
})
357+
})
358+
app.use(JsonEditorVue)
359+
app.mount('#app')
360+
</script>
361+
</body>
362+
363+
</html>
364+
```
365+
366+
##### Using the Global Build
367+
368+
> Not yet supported because `vanilla-jsoneditor` does not export UMD, please leave a message [here](https://github.com/josdejong/svelte-jsoneditor/discussions/196) if you need it.
253369
254-
const app = createApp({
255-
setup: () => ({
256-
value: ref()
370+
```html
371+
<!DOCTYPE html>
372+
<html lang="en">
373+
374+
<head>
375+
<meta charset="UTF-8" />
376+
</head>
377+
378+
<body>
379+
<div id="app">
380+
<json-editor-vue v-model="value"></json-editor-vue>
381+
</div>
382+
383+
<script src="https://unpkg.com/[email protected]"></script>
384+
<script src="https://unpkg.com/@vue/composition-api"></script>
385+
<script src="https://unpkg.com/vue-demi"></script>
386+
<!-- TODO --> <script src="./vanilla-jsoneditor.umd.js"></script>
387+
<script src="https://unpkg.com/json-editor-vue"></script>
388+
<script>
389+
const { createApp, ref } = VueCompositionAPI
390+
391+
const app = createApp({
392+
setup: () => ({
393+
value: ref(),
394+
}),
257395
})
258-
})
259-
app.use(JsonEditorVue)
260-
app.mount('#app')
261-
</script>
396+
397+
app.use(VueCompositionAPI)
398+
app.component('json-editor-vue', JsonEditorVue)
399+
app.mount('#app')
400+
</script>
401+
</body>
402+
403+
</html>
262404
```
263405

264406
<br>

0 commit comments

Comments
 (0)