npm - @svelgo/core - Versions diffs - 0.1.0 - Mend

@svelgo/core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/index.html +19 -0
package/package.json +28 -0
package/src/component/Button.svelte +31 -0
package/src/component/Label.svelte +16 -0
package/src/runtime/builtins.ts +9 -0
package/src/runtime/client.ts +68 -0
package/src/runtime/proto.ts +44 -0
package/src/runtime/registry.ts +15 -0
package/src/runtime/state.ts +22 -0
package/src/runtime/ui_descriptor.json +93 -0
package/src/runtime/ws.ts +44 -0
package/vite.config.ts +21 -0

package/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SvelGo (Vite dev only)</title>
+</head>
+<body>
+  <!-- This file is only used by the Vite dev server for standalone testing.
+       In production, the Go server serves its own HTML shell. -->
+  <div id="svelgo-root"></div>
+  <script>
+    window.__SVELGO_PAGE_ID__  = "dev-page";
+    window.__SVELGO_STATE__    = "";
+    window.__SVELGO_MANIFEST__ = [];
+  </script>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,28 @@
+{
+  "name": "@svelgo/core",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./runtime/client":   "./src/runtime/client.ts",
+    "./runtime/ws":       "./src/runtime/ws.ts",
+    "./runtime/state":    "./src/runtime/state.ts",
+    "./runtime/proto":    "./src/runtime/proto.ts",
+    "./runtime/registry": "./src/runtime/registry.ts",
+    "./ui_descriptor.json": "./src/runtime/ui_descriptor.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "protobufjs-cli": "^2.0.0",
+    "svelte": "^5.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.3.0"
+  },
+  "dependencies": {
+    "protobufjs": "^7.4.0"
+  }
+}

package/src/component/Button.svelte ADDED Viewed

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store'
+  import { getComponentStore } from '../runtime/state'
+  import { sendEvent } from '../runtime/ws'
+  let { id }: { id: string } = $props()
+  let state: Record<string, unknown> = $state({})
+  $effect(() => {
+    const store = getComponentStore(id) as Writable<Record<string, unknown>>
+    return store.subscribe(s => { state = s })
+  })
+</script>
+<button
+  onclick={() => sendEvent(id, 'click')}
+  disabled={!!state.disabled}
+  style="
+    background-color: {state.disabled ? '#9ca3af' : '#3b82f6'};
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    cursor: {state.disabled ? 'not-allowed' : 'pointer'};
+    opacity: {state.disabled ? '0.6' : '1'};
+    transition: background-color 0.15s ease;
+  "
+>
+  {state.label ?? ''}
+</button>

package/src/component/Label.svelte ADDED Viewed

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Writable } from 'svelte/store'
+  import { getComponentStore } from '../runtime/state'
+  let { id }: { id: string } = $props()
+  let state: Record<string, unknown> = $state({})
+  $effect(() => {
+    const store = getComponentStore(id) as Writable<Record<string, unknown>>
+    return store.subscribe(s => { state = s })
+  })
+</script>
+<span style="font-size: 1rem; color: #1f2937;">
+  {state.text ?? ''}
+</span>

package/src/runtime/builtins.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { registerComponent } from './registry'
+import { registerComponentDecoder, root } from './proto'
+import Button from '../component/Button.svelte'
+import Label from '../component/Label.svelte'
+registerComponent('svelgo.Button', Button)
+registerComponent('svelgo.Label', Label)
+registerComponentDecoder('svelgo.Button', root.lookupType('ui.ButtonState'))
+registerComponentDecoder('svelgo.Label', root.lookupType('ui.LabelState'))

package/src/runtime/client.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import { mount } from 'svelte'
+import { ComponentRegistry } from './registry'
+import { initComponentState } from './state'
+import { decodePageState, decodeComponentState } from './proto'
+import { openWebSocket } from './ws'
+import './builtins'
+interface ManifestEntry {
+  id:   string
+  type: string
+  slot: string
+}
+// Typed shape of the decoded PageState protobuf message.
+interface DecodedPageState {
+  pageId:     string
+  components: DecodedComponentState[]
+}
+interface DecodedComponentState {
+  id:         string
+  type:       string
+  stateBytes: Uint8Array
+}
+// Typed shape of the globals injected by the Go HTML shell.
+interface SvelGoWindow {
+  __SVELGO_PAGE_ID__:  string
+  __SVELGO_STATE__:    string
+  __SVELGO_MANIFEST__: ManifestEntry[]
+  __SVELGO_DEBUG__:    boolean
+}
+export function bootstrap() {
+  const w = window as unknown as SvelGoWindow
+  const pageId    = w.__SVELGO_PAGE_ID__
+  const stateBlob = w.__SVELGO_STATE__
+  const manifest  = w.__SVELGO_MANIFEST__
+  // Decode the protobuf state blob and initialise per-component Svelte stores
+  if (stateBlob) {
+    const pageState = decodePageState(stateBlob) as unknown as DecodedPageState
+    if (w.__SVELGO_DEBUG__) {
+      console.debug('[svelgo init] page state', pageState)
+    }
+    for (const cs of (pageState.components ?? [])) {
+      const decoded = decodeComponentState(cs.type, cs.stateBytes)
+      initComponentState(cs.id, decoded)
+    }
+  }
+  // Mount each Svelte component into the root div
+  const root = document.getElementById('svelgo-root')!
+  for (const entry of manifest) {
+    const Ctor = ComponentRegistry[entry.type]
+    if (!Ctor) {
+      console.warn(`SvelGo: unknown component type "${entry.type}"`)
+      continue
+    }
+    const target = document.createElement('div')
+    target.dataset.svelgoSlot = entry.id
+    root.appendChild(target)
+    mount(Ctor, { target, props: { id: entry.id } })
+  }
+  // Open the WebSocket for live state updates
+  openWebSocket(pageId)
+}

package/src/runtime/proto.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import protobuf from 'protobufjs/light'
+import descriptor from './ui_descriptor.json'
+export const root = protobuf.Root.fromJSON(descriptor as protobuf.INamespace)
+const PageStateMsg   = root.lookupType('ui.PageState')
+const ClientEventMsg = root.lookupType('ui.ClientEvent')
+const StateUpdateMsg = root.lookupType('ui.StateUpdate')
+// Map component type → protobuf message type for decoding state_bytes.
+// Applications register their component decoders by calling registerComponentDecoder().
+const componentTypes: Record<string, protobuf.Type> = {}
+export function registerComponentDecoder(typeName: string, msgType: protobuf.Type) {
+  componentTypes[typeName] = msgType
+}
+// Decode the base64 protobuf blob injected into the HTML shell
+export function decodePageState(base64blob: string): protobuf.Message {
+  const bytes = Uint8Array.from(atob(base64blob), c => c.charCodeAt(0))
+  return PageStateMsg.decode(bytes)
+}
+// Decode a component's state_bytes using its declared type
+export function decodeComponentState(type: string, stateBytes: Uint8Array): Record<string, unknown> {
+  const MsgType = componentTypes[type]
+  if (!MsgType) {
+    console.warn(`Unknown component type: ${type}`)
+    return {}
+  }
+  const msg = MsgType.decode(stateBytes)
+  return MsgType.toObject(msg, { defaults: true, longs: String, enums: String }) as Record<string, unknown>
+}
+// Decode a binary WebSocket frame as a StateUpdate
+export function decodeStateUpdate(buffer: ArrayBuffer): protobuf.Message {
+  return StateUpdateMsg.decode(new Uint8Array(buffer))
+}
+// Encode a ClientEvent to send over the WebSocket
+export function encodeClientEvent(payload: Record<string, unknown>): Uint8Array {
+  const msg = ClientEventMsg.create(payload)
+  return ClientEventMsg.encode(msg).finish()
+}

package/src/runtime/registry.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import type { ComponentType } from 'svelte'
+// Maps component type strings (from Go) to Svelte component constructors.
+// Applications register their components by calling registerComponent().
+export const ComponentRegistry: Record<string, ComponentType> = {}
+export function registerComponent(typeName: string, ctor: ComponentType) {
+  if (ComponentRegistry[typeName] && ComponentRegistry[typeName] !== ctor) {
+    console.warn(
+      `SvelGo: registerComponent("${typeName}") is overwriting an existing registration. ` +
+      `This is likely a mistake — each type name should be registered exactly once.`
+    )
+  }
+  ComponentRegistry[typeName] = ctor
+}

package/src/runtime/state.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { writable } from 'svelte/store'
+type Store = ReturnType<typeof writable<Record<string, unknown>>>
+const stores = new Map<string, Store>()
+export function initComponentState(id: string, initialState: Record<string, unknown>) {
+  stores.set(id, writable(initialState))
+}
+export function getComponentStore(id: string): Store {
+  const store = stores.get(id)
+  if (!store) throw new Error(`No state store for component "${id}"`)
+  return store
+}
+export function updateComponentState(id: string, patch: Record<string, unknown>) {
+  const store = stores.get(id)
+  if (store) {
+    store.update(current => ({ ...current, ...patch }))
+  }
+}

package/src/runtime/ui_descriptor.json ADDED Viewed

@@ -0,0 +1,93 @@
+{
+  "nested": {
+    "ui": {
+      "options": {
+        "go_package": "github.com/hawkhero/svelgo/gen/ui"
+      },
+      "nested": {
+        "PageState": {
+          "fields": {
+            "pageId": {
+              "type": "string",
+              "id": 1
+            },
+            "components": {
+              "rule": "repeated",
+              "type": "ComponentState",
+              "id": 2
+            }
+          }
+        },
+        "ComponentState": {
+          "fields": {
+            "id": {
+              "type": "string",
+              "id": 1
+            },
+            "type": {
+              "type": "string",
+              "id": 2
+            },
+            "stateBytes": {
+              "type": "bytes",
+              "id": 3
+            }
+          }
+        },
+        "ClientEvent": {
+          "fields": {
+            "pageId": {
+              "type": "string",
+              "id": 1
+            },
+            "componentId": {
+              "type": "string",
+              "id": 2
+            },
+            "eventType": {
+              "type": "string",
+              "id": 3
+            },
+            "payload": {
+              "type": "bytes",
+              "id": 4
+            }
+          }
+        },
+        "StateUpdate": {
+          "fields": {
+            "pageId": {
+              "type": "string",
+              "id": 1
+            },
+            "updatedComponents": {
+              "rule": "repeated",
+              "type": "ComponentState",
+              "id": 2
+            }
+          }
+        },
+        "ButtonState": {
+          "fields": {
+            "label": {
+              "type": "string",
+              "id": 1
+            },
+            "disabled": {
+              "type": "bool",
+              "id": 2
+            }
+          }
+        },
+        "LabelState": {
+          "fields": {
+            "text": {
+              "type": "string",
+              "id": 1
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/runtime/ws.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { decodeStateUpdate, decodeComponentState, encodeClientEvent } from './proto'
+import { updateComponentState } from './state'
+// Typed shape of the decoded StateUpdate protobuf message.
+interface DecodedStateUpdate {
+  pageId:            string
+  updatedComponents: DecodedComponentState[]
+}
+interface DecodedComponentState {
+  id:         string
+  type:       string
+  stateBytes: Uint8Array
+}
+const debug = () => (window as unknown as { __SVELGO_DEBUG__: boolean }).__SVELGO_DEBUG__ === true
+let socket: WebSocket
+export function openWebSocket(pageId: string) {
+  const url = `ws://${location.host}/ws?page-id=${encodeURIComponent(pageId)}`
+  socket = new WebSocket(url)
+  socket.binaryType = 'arraybuffer'
+  socket.onmessage = (evt) => {
+    const update = decodeStateUpdate(evt.data) as unknown as DecodedStateUpdate
+    if (debug()) console.debug('[svelgo ws ←]', update)
+    for (const cs of (update.updatedComponents ?? [])) {
+      const decoded = decodeComponentState(cs.type, cs.stateBytes)
+      updateComponentState(cs.id, decoded)
+    }
+  }
+  socket.onerror = (err) => console.error('SvelGo WebSocket error:', err)
+  socket.onclose = () => console.log('SvelGo WebSocket closed')
+}
+export function sendEvent(componentId: string, eventType: string, payload: Uint8Array = new Uint8Array()) {
+  if (!socket || socket.readyState !== WebSocket.OPEN) return
+  const pageId = (window as unknown as { __SVELGO_PAGE_ID__: string }).__SVELGO_PAGE_ID__
+  const bytes = encodeClientEvent({ pageId, componentId, eventType, payload })
+  if (debug()) console.debug('[svelgo ws →]', { pageId, componentId, eventType })
+  socket.send(bytes)
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    // Emit manifest.json so the Go asset resolver can find hashed filenames
+    manifest: true,
+    rollupOptions: {
+      input: resolve(__dirname, 'src/main.ts'),
+    },
+    // Output directly into the Go embed directory
+    outDir: resolve(__dirname, '../static'),
+    emptyOutDir: true,
+  },
+  server: {
+    // Allow the Go server to load scripts cross-origin in dev mode
+    cors: true,
+  },
+})