@structured-field/widget-editor 1.0.0 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-field/widget-editor",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A lightweight JSON Schema form builder with support for relation fields (ForeignKey, QuerySet) and autocomplete search.",
   "type": "module",
   "main": "dist/structured-widget-editor.js",
@@ -22,7 +22,6 @@
   ],
   "scripts": {
     "build": "rollup -c && node scripts/bundle-iife.mjs",
-    "build:cdn": "rollup -c && node scripts/bundle-iife.mjs",
     "dev": "rollup -c -w",
     "test:serve": "vite --open"
   },
@@ -43,6 +42,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@vitejs/plugin-vue": "^6.0.4",
     "@vue/compiler-sfc": "^3.5.30",
@@ -62,6 +62,11 @@
     "branches": [
       "master"
     ],
+    "verifyConditions": [
+      "@semantic-release/changelog",
+      "@semantic-release/git",
+      "@semantic-release/github"
+    ],
     "plugins": [
       "@semantic-release/commit-analyzer",
       "@semantic-release/release-notes-generator",

package/src/SchemaForm.vue

@@ -24,6 +24,7 @@ export default {
     errors: { type: Object, default: () => ({}) },
   },
   emits: ['change'],
+  expose: ['getValue'],
   data() {
     const parsedSchema = typeof this.schema === 'string' ? JSON.parse(this.schema) : this.schema;
     const defs = parsedSchema.$defs || parsedSchema.definitions || {};

package/src/editors/ArrayEditor.vue

@@ -41,14 +41,18 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
 
 let keyCounter = 0;
 
+import SchemaEditor from './SchemaEditor.vue';
+
 export default {
   name: 'ArrayEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => [] },

package/src/editors/NullableEditor.vue

@@ -28,12 +28,16 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
 
+import SchemaEditor from './SchemaEditor.vue';
+
 export default {
   name: 'NullableEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },

package/src/editors/ObjectEditor.vue

@@ -29,11 +29,14 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
+import SchemaEditor from './SchemaEditor.vue';
 
 export default {
   name: 'ObjectEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: () => ({}) },

package/src/editors/UnionEditor.vue

@@ -20,12 +20,16 @@
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
 import { getDefaultForSchema } from '../utils';
 
+import SchemaEditor from './SchemaEditor.vue';
+
 export default {
   name: 'UnionEditor',
-  components: { SchemaEditor: defineAsyncComponent(() => import('./SchemaEditor.vue')) },
+  beforeCreate() {
+    if (!this.$options.components) this.$options.components = {};
+    this.$options.components.SchemaEditor = SchemaEditor;
+  },
   props: {
     schema: { type: Object, required: true },
     modelValue: { default: null },

package/src/index.js

@@ -13,140 +13,13 @@ export { default as NullableEditor } from './editors/NullableEditor.vue';
 export { default as UnionEditor } from './editors/UnionEditor.vue';
 export { default as RelationEditor } from './editors/RelationEditor.vue';
 
-import { createApp, h, ref, reactive } from 'vue';
+import { defineCustomElement } from 'vue';
 import SchemaFormComponent from './SchemaForm.vue';
 
-export class SchemaFormElement extends HTMLElement {
-  constructor() {
-    super();
-    this._formRef = ref(null);
-    this._props = reactive({
-      schema: {},
-      initialData: undefined,
-      errors: {},
-    });
-    this._app = null;
-    this._mountPoint = null;
-  }
-
-  connectedCallback() {
-    this._mountPoint = document.createElement('div');
-    this.appendChild(this._mountPoint);
-
-    // Read from attributes if properties haven't been set programmatically
-    if (!this._propsSet) {
-      const schemaAttr = this.getAttribute('schema');
-      const dataAttr = this.getAttribute('initial-data');
-      if (schemaAttr) this._props.schema = JSON.parse(schemaAttr);
-      if (dataAttr) this._props.initialData = JSON.parse(dataAttr);
-    }
-
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(SchemaFormComponent, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-
-  disconnectedCallback() {
-    if (this._app) {
-      this._app.unmount();
-      this._app = null;
-    }
-    this._mountPoint = null;
-  }
-
-  // --- Property API ---
-
-  get schema() {
-    return this._props.schema;
-  }
-
-  set schema(val) {
-    this._propsSet = true;
-    this._props.schema = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get initialData() {
-    return this._props.initialData;
-  }
-
-  set initialData(val) {
-    this._propsSet = true;
-    this._props.initialData = typeof val === 'string' ? JSON.parse(val) : val;
-    this._rerender();
-  }
-
-  get errors() {
-    return this._props.errors;
-  }
-
-  set errors(val) {
-    this._propsSet = true;
-    this._props.errors = typeof val === 'string' ? JSON.parse(val) : (val || {});
-    this._rerender();
-  }
-
-  // --- Attribute reflection ---
-
-  static get observedAttributes() {
-    return ['schema', 'initial-data', 'errors'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal || this._propsSet) return;
-    if (name === 'schema') {
-      this._props.schema = newVal ? JSON.parse(newVal) : {};
-    } else if (name === 'initial-data') {
-      this._props.initialData = newVal ? JSON.parse(newVal) : undefined;
-    } else if (name === 'errors') {
-      this._props.errors = newVal ? JSON.parse(newVal) : {};
-    }
-    this._rerender();
-  }
-
-  // --- Public methods ---
-
-  getValue() {
-    return this._formRef.value?.getValue?.() ?? null;
-  }
-
-  // --- Internal ---
-
-  _rerender() {
-    if (!this._app) return;
-    this._app.unmount();
-    this._mountPoint.innerHTML = '';
-    const formRef = this._formRef;
-    const props = this._props;
-
-    this._app = createApp({
-      render: () => h(SchemaFormComponent, {
-        ref: formRef,
-        schema: props.schema,
-        initialData: props.initialData,
-        errors: props.errors,
-        onChange: (val) => {
-          this.dispatchEvent(new CustomEvent('change', { detail: val, bubbles: true }));
-        },
-      }),
-    });
-
-    this._app.mount(this._mountPoint);
-  }
-}
+export const SchemaFormElement = defineCustomElement({
+  ...SchemaFormComponent,
+  shadowRoot: false,
+});
 
 export function registerCustomElement(tagName = 'schema-form') {
   if (!customElements.get(tagName)) {