chore: embed the types of dependencies in the vanilla-package (see #19)

package.json

@@ -25,6 +25,7 @@
     "build:vanilla:clean": "del-cli package-vanilla",
     "build:vanilla:bundle": "rollup --config rollup.config.bundle.js",
     "build:vanilla:bundle-types": "rollup --config rollup.config.bundle-types.js",
+    "build:vanilla:postprocess-types": "node tools/postprocessVanillaTypes.js",
     "build:vanilla:copy:files": "cpy CHANGELOG.md LICENSE.md SECURITY.md package-vanilla",
     "build:vanilla:copy:readme": "cpy --rename README.md README-VANILLA.md package-vanilla",
     "build:vanilla:copy:themes": "cpy --flat src/lib/themes package-vanilla/themes",

rollup.config.bundle-types.js

@@ -8,5 +8,10 @@ export default {
       format: 'es'
     }
   ],
-  plugins: [dts()]
+  plugins: [
+    dts({
+      // we want to create a standalone bundle that does not have dependencies
+      respectExternal: true
+    })
+  ]
 }

rollup.config.bundle.js

@@ -13,7 +13,7 @@ const packageFolder = 'package-vanilla'
 const file = path.join(packageFolder, 'index.js')
 
 export default {
-  input: 'src/lib/index.ts',
+  input: 'src/lib/index-vanilla.ts',
   output: [
     {
       file,

src/lib/index-vanilla.ts

@@ -0,0 +1,2 @@
+export { SvelteComponentTyped } from 'svelte'
+export * from './index'

src/lib/plugins/value/renderJSONSchemaEnum.ts

@@ -2,7 +2,7 @@ import EnumValue from './components/EnumValue.svelte'
 import { getJSONSchemaOptions } from '../../utils/jsonSchemaUtils.js'
 import type { RenderValueComponentDescription, RenderValueProps } from '../../types'
 import type { JSONData } from 'immutable-json-patch'
-import type { SvelteComponent } from 'svelte'
+import type { SvelteComponentTyped } from 'svelte'
 
 /**
  * Search the JSON schema for enums defined at given props.path. If found,
@@ -32,7 +32,7 @@ export function renderJSONSchemaEnum(
 
     return [
       {
-        component: EnumValue as unknown as SvelteComponent, // TODO: casting should not be needed
+        component: EnumValue as unknown as SvelteComponentTyped, // TODO: casting should not be needed
         props: {
           value,
           path,

src/lib/plugins/value/renderValue.ts

@@ -5,7 +5,7 @@ import EditableValue from './components/EditableValue.svelte'
 import ReadonlyValue from './components/ReadonlyValue.svelte'
 import TimestampTag from './components/TimestampTag.svelte'
 import type { RenderValueComponentDescription, RenderValueProps } from '../../types'
-import type { SvelteComponent } from 'svelte'
+import type { SvelteComponentTyped } from 'svelte'
 
 export function renderValue({
   path,
@@ -25,21 +25,21 @@ export function renderValue({
 
   if (!isEditing && isBoolean(value)) {
     renderers.push({
-      component: BooleanToggle as unknown as SvelteComponent, // TODO: casting should not be needed
+      component: BooleanToggle as unknown as SvelteComponentTyped, // TODO: casting should not be needed
       props: { path, value, readOnly, onPatch, focus }
     })
   }
 
   if (!isEditing && isColor(value)) {
     renderers.push({
-      component: ColorPicker as unknown as SvelteComponent, // TODO: casting should not be needed
+      component: ColorPicker as unknown as SvelteComponentTyped, // TODO: casting should not be needed
       props: { path, value, readOnly, onPatch, focus }
     })
   }
 
   if (isEditing) {
     renderers.push({
-      component: EditableValue as unknown as SvelteComponent, // TODO: casting should not be needed
+      component: EditableValue as unknown as SvelteComponentTyped, // TODO: casting should not be needed
       props: {
         path,
         value,
@@ -56,14 +56,14 @@ export function renderValue({
 
   if (!isEditing) {
     renderers.push({
-      component: ReadonlyValue as unknown as SvelteComponent, // TODO: casting should not be needed
+      component: ReadonlyValue as unknown as SvelteComponentTyped, // TODO: casting should not be needed
       props: { path, value, readOnly, normalization, searchResultItems, onSelect }
     })
   }
 
   if (!isEditing && isTimestamp(value)) {
     renderers.push({
-      component: TimestampTag as unknown as SvelteComponent, // TODO: casting should not be needed
+      component: TimestampTag as unknown as SvelteComponentTyped, // TODO: casting should not be needed
       props: { value }
     })
   }

src/lib/types.ts

@@ -1,5 +1,7 @@
 import type { JSONData, JSONPatchDocument, JSONPath, JSONPointer } from 'immutable-json-patch'
-import type { SvelteComponent } from 'svelte'
+import type { SvelteComponentTyped } from 'svelte'
+
+export type { JSONData, JSONPointer, JSONPath, JSONPatchDocument } from 'immutable-json-patch'
 
 export type TextContent = { text: string } | { json: undefined; text: string }
 
@@ -311,7 +313,7 @@ export type InsertType = 'value' | 'object' | 'array' | 'structure'
 
 export interface PopupEntry {
   id: number
-  component: SvelteComponent
+  component: SvelteComponentTyped
   props: Record<string, unknown>
   options: AbsolutePopupOptions
 }
@@ -451,7 +453,7 @@ export interface DraggingState {
 
 // TODO: can we define proper generic types here?
 export interface RenderValueComponentDescription {
-  component: SvelteComponent
+  component: SvelteComponentTyped
   props: Record<string, unknown>
 }
 

tools/createVanillaPackageJson.js

@@ -25,7 +25,9 @@ const pkg = JSON.parse(String(readFileSync(path.join(dirname, '..', 'package.jso
 const vanillaPackage = {
   ...pkg,
   name: 'vanilla-jsoneditor',
-  scripts: undefined,
+  scripts: {},
+  dependencies: {},
+  devDependencies: {},
   exports
 }
 writeFileSync(

tools/postprocessVanillaTypes.js

@@ -0,0 +1,20 @@
+import { readFileSync, writeFileSync } from 'fs'
+import { dirname } from './dirname.cjs'
+import path from 'path'
+
+const declareModuleSection = `declare module '*.svelte' {
+    export { SvelteComponentDev as default } from 'svelte/internal';
+}
+`
+
+const filename = path.join(dirname, '..', 'package-vanilla', 'index.d.ts')
+const contents = String(readFileSync(filename))
+
+const index = contents.indexOf(declareModuleSection)
+if (index === -1) {
+  console.error(`Failed to remove the Svelte declare module section from ${filename}`)
+  process.exit(1)
+}
+
+const cleanedContents = contents.replace(declareModuleSection, '')
+writeFileSync(filename, cleanedContents)