@php-script/editor-svelte 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,29 @@
-# Temporary Holding Version
+# @php-script/editor-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![npm](https://img.shields.io/npm/v/@php-script/editor-svelte?label=npm)](https://www.npmjs.com/package/@php-script/editor-svelte)
+[![Downloads](https://img.shields.io/npm/dm/@php-script/editor-svelte?label=downloads)](https://www.npmjs.com/package/@php-script/editor-svelte)
+
+Documentation: https://php-script.github.io/php-script-editor/packages/svelte.html
+
+Svelte 5 wrapper for the `<php-script-editor>` web component, with `bind:value`. Loads the element in `onMount`, so it is safe with SvelteKit SSR.
+
+## Installation
+
+```bash
+npm i @php-script/editor-svelte monaco-editor
+```
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { PhpScriptEditor } from '@php-script/editor-svelte';
+
+  let code = $state('echo "Hello";');
+</script>
+
+<PhpScriptEditor bind:value={code} configUrl="/php-script/config" />
+```
+
+See the [documentation](https://php-script.github.io/php-script-editor/packages/svelte.html) for all props, events and methods, and
+[Server and language config](https://php-script.github.io/php-script-editor/server.html) for the endpoints.

package/dist/PhpScriptEditor.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import type {
+    LintDiagnostic,
+    PhpScriptConfig,
+    PhpScriptEditor as PhpScriptEditorElement,
+    PhpScriptTheme,
+    SaveMethod,
+    SaveResult,
+    ThemeMode,
+  } from '@php-script/editor';
+  import { applyChangedProps } from '@php-script/editor/core';
+  import { onMount } from 'svelte';
+  import { loadPhpScriptEditor } from './load.js';
+
+  type MonacoEditor = NonNullable<PhpScriptEditorElement['editor']>;
+
+  interface Props {
+    value?: string;
+    config?: PhpScriptConfig | string | null;
+    configUrl?: string;
+    saveUrl?: string;
+    saveMethod?: SaveMethod;
+    saveField?: string;
+    saveHeaders?: Record<string, string>;
+    savePayload?: Record<string, unknown>;
+    persisted?: boolean;
+    csrfToken?: string;
+    lintUrl?: string;
+    lintDelay?: number;
+    theme?: ThemeMode | PhpScriptTheme;
+    readonly?: boolean;
+    name?: string;
+    options?: Record<string, unknown>;
+    labels?: Record<string, string>;
+    noToolbar?: boolean;
+    noSaveShortcut?: boolean;
+    /** CSS height, e.g. `24rem`. */
+    height?: string;
+    class?: string;
+    /** The custom element (bindable). */
+    element?: PhpScriptEditorElement | null;
+    onchange?: (value: string) => void;
+    onready?: (editor: MonacoEditor, element: PhpScriptEditorElement) => void;
+    onsavestart?: (event: CustomEvent) => void;
+    onsaved?: (result: SaveResult & { value: string }) => void;
+    onsaveerror?: (error: Error) => void;
+    ondiagnostics?: (diagnostics: LintDiagnostic[]) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    element = $bindable(null),
+    height,
+    class: className,
+    onchange,
+    onready,
+    onsavestart,
+    onsaved,
+    onsaveerror,
+    ondiagnostics,
+    ...rest
+  }: Props = $props();
+
+  // Push props to element properties (objects pass without JSON).
+  // Only changed props, so the element's own updates (persisted, saveUrl after POST) survive.
+  const synced = new Map<string, unknown>();
+  $effect(() => {
+    if (element) applyChangedProps(element, { ...rest }, synced);
+  });
+
+  $effect(() => {
+    if (element && value !== undefined && element.value !== value) element.value = value;
+  });
+
+  onMount(() => {
+    const el = element!;
+    const listeners: Array<[string, (event: Event) => void]> = [
+      [
+        'ps-change',
+        (e) => {
+          value = (e as CustomEvent<{ value: string }>).detail.value;
+          onchange?.(value);
+        },
+      ],
+      [
+        'ps-ready',
+        (e) => onready?.((e as CustomEvent<{ editor: MonacoEditor }>).detail.editor, el),
+      ],
+      ['ps-save-start', (e) => onsavestart?.(e as CustomEvent)],
+      ['ps-saved', (e) => onsaved?.((e as CustomEvent<SaveResult & { value: string }>).detail)],
+      ['ps-save-error', (e) => onsaveerror?.((e as CustomEvent<{ error: Error }>).detail.error)],
+      [
+        'ps-diagnostics',
+        (e) =>
+          ondiagnostics?.((e as CustomEvent<{ diagnostics: LintDiagnostic[] }>).detail.diagnostics),
+      ],
+    ];
+    for (const [type, fn] of listeners) el.addEventListener(type, fn);
+    void loadPhpScriptEditor();
+    return () => {
+      for (const [type, fn] of listeners) el.removeEventListener(type, fn);
+    };
+  });
+</script>
+
+<php-script-editor bind:this={element} class={className} style:--php-script-editor-height={height}
+></php-script-editor>

package/dist/PhpScriptEditor.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { LintDiagnostic, PhpScriptConfig, PhpScriptEditor as PhpScriptEditorElement, PhpScriptTheme, SaveMethod, SaveResult, ThemeMode } from '@php-script/editor';
+type MonacoEditor = NonNullable<PhpScriptEditorElement['editor']>;
+interface Props {
+    value?: string;
+    config?: PhpScriptConfig | string | null;
+    configUrl?: string;
+    saveUrl?: string;
+    saveMethod?: SaveMethod;
+    saveField?: string;
+    saveHeaders?: Record<string, string>;
+    savePayload?: Record<string, unknown>;
+    persisted?: boolean;
+    csrfToken?: string;
+    lintUrl?: string;
+    lintDelay?: number;
+    theme?: ThemeMode | PhpScriptTheme;
+    readonly?: boolean;
+    name?: string;
+    options?: Record<string, unknown>;
+    labels?: Record<string, string>;
+    noToolbar?: boolean;
+    noSaveShortcut?: boolean;
+    /** CSS height, e.g. `24rem`. */
+    height?: string;
+    class?: string;
+    /** The custom element (bindable). */
+    element?: PhpScriptEditorElement | null;
+    onchange?: (value: string) => void;
+    onready?: (editor: MonacoEditor, element: PhpScriptEditorElement) => void;
+    onsavestart?: (event: CustomEvent) => void;
+    onsaved?: (result: SaveResult & {
+        value: string;
+    }) => void;
+    onsaveerror?: (error: Error) => void;
+    ondiagnostics?: (diagnostics: LintDiagnostic[]) => void;
+}
+declare const PhpScriptEditor: import("svelte").Component<Props, {}, "value" | "element">;
+type PhpScriptEditor = ReturnType<typeof PhpScriptEditor>;
+export default PhpScriptEditor;
+//# sourceMappingURL=PhpScriptEditor.svelte.d.ts.map

package/dist/PhpScriptEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhpScriptEditor.svelte.d.ts","sourceRoot":"","sources":["../src/PhpScriptEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,cAAc,EACd,eAAe,EACf,eAAe,IAAI,sBAAsB,EACzC,cAAc,EACd,UAAU,EACV,UAAU,EACV,SAAS,EACV,MAAM,oBAAoB,CAAC;AAM5B,KAAK,YAAY,GAAG,WAAW,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAElE,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,OAAO,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC1E,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;CACzD;AAqEH,QAAA,MAAM,eAAe,4DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/elements.d.ts

@@ -0,0 +1,9 @@
+import type { PhpScriptEditor } from '@php-script/editor';
+import type { HTMLAttributes } from 'svelte/elements';
+
+declare module 'svelte/elements' {
+  interface SvelteHTMLElements {
+    'php-script-editor': HTMLAttributes<PhpScriptEditor>;
+  }
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PhpScriptEditor, default } from './PhpScriptEditor.svelte';
+export { loadPhpScriptEditor } from './load.js';
+export type { LintDiagnostic, PhpScriptConfig, PhpScriptEditor as PhpScriptEditorElement, PhpScriptTheme, SaveResult, } from '@php-script/editor';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,YAAY,EACV,cAAc,EACd,eAAe,EACf,eAAe,IAAI,sBAAsB,EACzC,cAAc,EACd,UAAU,GACX,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as PhpScriptEditor, default } from './PhpScriptEditor.svelte';
+export { loadPhpScriptEditor } from './load.js';

package/dist/load.d.ts

@@ -0,0 +1,3 @@
+/** Loads and registers the custom element in the browser only (SvelteKit SSR-safe). */
+export declare const loadPhpScriptEditor: () => Promise<unknown>;
+//# sourceMappingURL=load.d.ts.map

package/dist/load.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"load.d.ts","sourceRoot":"","sources":["../src/load.ts"],"names":[],"mappings":"AAEA,uFAAuF;AACvF,eAAO,MAAM,mBAAmB,wBAAkD,CAAC"}

package/dist/load.js

@@ -0,0 +1,3 @@
+let loader = null;
+/** Loads and registers the custom element in the browser only (SvelteKit SSR-safe). */
+export const loadPhpScriptEditor = () => (loader ??= import('@php-script/editor'));

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@php-script/editor-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.1",
+  "description": "Svelte 5 wrapper for the <php-script-editor> web component (bind:value support).",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@php-script/editor": "^0.1.1"
+  },
+  "peerDependencies": {
+    "monaco-editor": ">=0.55.0 <1.0.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@testing-library/svelte": "^5.4.2",
+    "@vitest/browser-playwright": "^5.0.5",
+    "monaco-editor": "^0.57.0",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.4.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/php-script/php-script-editor.git",
+    "directory": "packages/svelte"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "test": "vitest run"
+  }
 }