vue-core 3.0.0-rc.11

Author: righ

packages/preact-core/example/App.jsx

@@ -1,25 +1,21 @@
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useRef } from 'preact/hooks';
 import { GridSheet, Policy } from '@gridsheet/preact-core';
 import { useSpellbook } from '@gridsheet/preact-core/spellbook';
 
 export function App() {
   const [enableDecimalLabeler, setEnableDecimalLabeler] = useState(false);
 
-  const bookProps = {
-    policies: {},
-  };
-  const book = useSpellbook(bookProps);
+  const bookPropsRef = useRef({ policies: {} });
+  const book = useSpellbook(bookPropsRef.current);
 
-  useEffect(() => {
-    bookProps.policies.decimal = enableDecimalLabeler
-      ? new Policy({ mixins: [{ renderRowHeaderLabel: (n) => String(n) }] })
+  const handleToggle = (e) => {
+    const checked = e.target.checked;
+    setEnableDecimalLabeler(checked);
+    bookPropsRef.current.policies.decimal = checked
+      ? new Policy({ mixins: [{ renderColHeaderLabel: (n) => String(n) }] })
       : null;
-    book.registry.transmit(bookProps);
-  }, [enableDecimalLabeler]);
-
-  setTimeout(() => {
-    console.log('Current policies:', book.registry);
-  }, 5000);
+    book.registry.transmit(bookPropsRef.current);
+  };
 
   return (
     <main>
@@ -57,7 +53,7 @@ export function App() {
           <input
             type="checkbox"
             checked={enableDecimalLabeler}
-            onChange={(e) => setEnableDecimalLabeler(e.target.checked)}
+            onChange={handleToggle}
           />
           Enable Decimal Labeler for Sheet2
         </label>

packages/vue-core/example/App.vue

@@ -4,14 +4,14 @@
 
     <div class="grid-container">
       <GridSheet
-        :hub="hub"
+        :book="book"
         :initialCells="{
           A1: { value: 'Hello' },
           B1: { value: 'Vue', style: { backgroundColor: '#448888'} },
           A2: { value: 123 },
           B2: { value: 456 },
           A3: { value: 789},
-          C10: { value: '=SUM(A2:B2)' },
+          C6: { value: '=SUM(A2:B2)' },
         }"
         :options="{
           mode: 'dark',
@@ -20,10 +20,10 @@
       />
 
       <GridSheet
-        :hub="hub"
+        :book="book"
         :initialCells="{
           C3: { value: '=SUM(Sheet1!A2:B3)' },
-          default: { labeler: 'decimal' },
+          defaultCol: { policy: 'decimal' },
         }"
         :options="{}"
         sheetName="Sheet2"
@@ -33,10 +33,10 @@
     <!-- Labeler Control -->
     <div class="labeler-control">
       <label>
-        <input 
-          type="checkbox" 
-          v-model="enableDecimalLabeler" 
-          @change="updateWireProps"
+        <input
+          type="checkbox"
+          v-model="enableDecimalLabeler"
+          @change="handleToggle"
         />
         Enable Decimal Labeler for Sheet2
       </label>
@@ -45,27 +45,21 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { GridSheet, useHub } from '@gridsheet/vue-core';
+import { ref } from 'vue';
+import { GridSheet, Policy } from '@gridsheet/vue-core';
+import { useSpellbook } from '@gridsheet/vue-core/spellbook';
 
 const enableDecimalLabeler = ref(false);
 
-const hubProps = reactive({
-  labelers: enableDecimalLabeler.value ? {
-    decimal: (n) => String(n)
-  } : {}
-});
+const bookProps = { policies: {} };
+const book = useSpellbook(bookProps);
 
-const hub = useHub(hubProps);
-
-const updateWireProps = () => {
-  if (enableDecimalLabeler.value) {
-    hubProps.labelers = {
-      decimal: (n) => String(n)
-    };
-  } else {
-    hubProps.labelers = {};
-  }
+const handleToggle = () => {
+  const { registry } = book.value;
+  bookProps.policies.decimal = enableDecimalLabeler.value
+    ? new Policy({ mixins: [{ renderColHeaderLabel: (n) => String(n) }] })
+    : null;
+  registry.transmit(bookProps);
 };
 </script>
 

packages/vue-core/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@gridsheet/vue-core",
-  "version": "2.2.0-0",
+  "version": "3.0.0-rc.11",
   "description": "Spreadsheet component for Vue 3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./spellbook": {
+      "types": "./dist/spellbook.d.ts",
+      "import": "./dist/spellbook.js",
+      "default": "./dist/spellbook.js"
+    }
+  },
   "files": ["dist"],
   "scripts": {
     "dev": "vite example",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "rm -rf ./dist || true && vite build"
   },
   "homepage": "https://gridsheet.walkframe.com/",
   "repository": {
@@ -20,13 +31,14 @@
     "vue": "^3.3.0"
   },
   "dependencies": {
-    "@gridsheet/preact-core": "^2.2.0"
+    "@gridsheet/preact-core": "workspace:*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
+    "@gridsheet/functions": "workspace:*",
     "vue": "^3.4.21",
     "vite": "^6.3.5",
-    "vite-plugin-dts": "^3.9.0"
+    "vite-plugin-dts": "^4.5.3"
   },
   "author": "righ",
   "license": "Apache-2.0"

packages/vue-core/src/GridSheet.vue

@@ -1,17 +1,17 @@
 <script lang="ts">
-import { defineComponent, onMounted, onBeforeUnmount, ref, h as vueH, isRef, watch } from 'vue';
+import { defineComponent, onMounted, onBeforeUnmount, ref, h as vueH, watch } from 'vue';
 import {
   GridSheet as PreactGridSheet,
   h as preactH,
   render as preactRender,
 } from '@gridsheet/preact-core';
-import type { Ref } from 'vue';
 
-import type { 
-  CellsByAddressType, 
-  OptionsType, 
-  HubType,
-  Connector,
+import type {
+  CellsByAddressType,
+  OptionsType,
+  BookType,
+  SheetHandle,
+  StoreHandle,
 } from '@gridsheet/preact-core';
 
 interface RefObject<T> {
@@ -29,13 +29,17 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    hub: {
-      type: Object as () => HubType | Ref<HubType>,
-      default: null,
+    book: {
+      type: Object as () => BookType,
+      default: undefined,
     },
-    connector: {
-      type: Object as () => RefObject<Connector | null>,
-      default: null,
+    sheetRef: {
+      type: Object as () => RefObject<SheetHandle | null>,
+      default: undefined,
+    },
+    storeRef: {
+      type: Object as () => RefObject<StoreHandle | null>,
+      default: undefined,
     },
     options: {
       type: Object as () => OptionsType,
@@ -55,11 +59,15 @@ export default defineComponent({
     let root: HTMLElement | null = null;
 
     function getPreactProps() {
-      // Remove legacy tableRef, use connector instead
-      const { tableRef, ...rest } = props as any;
       return {
-        ...rest,
-        hub: isRef(props.hub) ? (props.hub.value as HubType | undefined) : (props.hub as HubType | undefined),
+        initialCells: props.initialCells,
+        sheetName: props.sheetName,
+        book: props.book,
+        sheetRef: props.sheetRef,
+        storeRef: props.storeRef,
+        options: props.options,
+        className: props.className,
+        style: props.style,
       };
     }
 
@@ -75,24 +83,16 @@ export default defineComponent({
 
     onMounted(() => {
       renderPreact();
-      if (isRef(props.hub)) {
-        watch(
-          () => (props.hub as Ref<HubType>).value,
-          renderPreact,
-          { deep: false }
-        );
-      } else {
-        watch(
-          () => props.hub,
-          renderPreact,
-          { deep: false }
-        );
-      }
+      watch(
+        () => props.book,
+        renderPreact,
+        { deep: false }
+      );
     });
 
     onBeforeUnmount(() => {
       if (root) {
-        root.innerHTML = '';
+        preactRender(null, root);
       }
     });
 
@@ -101,8 +101,6 @@ export default defineComponent({
     };
   },
 });
-
-
 </script>
 
 <template>

packages/vue-core/src/book.ts

@@ -1,25 +1,19 @@
-import { shallowRef, watch } from 'vue';
-import { createBook, RegistryProps, type TransmitProps } from '@gridsheet/preact-core';
+import { shallowRef } from 'vue';
+import { createBook, updateSheet, type BookType, type RegistryProps, type TransmitProps } from '@gridsheet/preact-core';
 
-export function useBook(registryProps: RegistryProps = {}) {
-  const book = createBook(registryProps);
-  const ref = shallowRef(book);
+export function useBook(props: RegistryProps = {}) {
+  const book = createBook(props);
+  const ref = shallowRef<BookType>(book);
   const { registry } = ref.value;
 
-  function transmit(patch?: TransmitProps) {
+  registry.updateSheet = updateSheet;
+  registry.transmit = (patch?: TransmitProps) => {
     Object.assign(registry, patch);
     if (!registry.ready) {
       return;
     }
-    requestAnimationFrame(() => (ref.value = { ...ref.value }));
-  }
-  registry.transmit = transmit;
+    requestAnimationFrame(() => (ref.value = { registry }));
+  };
 
-  // Watch for registryProps changes and apply them to book
-  watch(
-    () => registryProps,
-    (newProps) => transmit(newProps),
-    { deep: true },
-  );
   return ref;
 }

packages/vue-core/src/spellbook.ts

@@ -0,0 +1,9 @@
+import { allFunctions } from '@gridsheet/functions';
+import type { RegistryProps } from '@gridsheet/preact-core';
+import { useBook } from './book';
+
+export { createSpellbook } from '@gridsheet/preact-core/spellbook';
+
+/** useBook with all extended functions pre-loaded (Vue version). */
+export const useSpellbook = ({ additionalFunctions, ...rest }: RegistryProps = {}) =>
+  useBook({ ...rest, additionalFunctions: { ...allFunctions, ...additionalFunctions } });

packages/vue-core/vite.config.js

@@ -14,26 +14,30 @@ export default defineConfig({
     vue(),
     dts({
       tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
-      include: ['index.ts', 'src'],
+      include: ['src'],
       outDir: 'dist',
       insertTypesEntry: true,
-      copyDtsFiles: true
-    })
+      copyDtsFiles: true,
+    }),
   ],
   build: {
     lib: {
       entry: path.resolve(__dirname, './src/index.ts'),
       name: 'GridSheetVueCore',
       formats: ['es'],
-      fileName: () => 'index.js'
+      fileName: (_, name) => `${name}.js`,
     },
     outDir: 'dist',
     emptyOutDir: true,
     sourcemap: true,
-    minify: "esbuild",
+    minify: 'esbuild',
     rollupOptions: {
-      external: ['vue', '@gridsheet/preact-core'],
-    }
+      external: ['vue', /^@gridsheet\/preact-core/, /^@gridsheet\/core/, /^@gridsheet\/functions/, /^dayjs/],
+      input: {
+        index: path.resolve(__dirname, './src/index.ts'),
+        spellbook: path.resolve(__dirname, './src/spellbook.ts'),
+      },
+    },
   },
   resolve: {
     alias: {