vue-lynx 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-lynx",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "private": false,
   "description": "Vue 3 framework for building Lynx apps",
   "keywords": [
@@ -97,7 +97,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build) && (cd main-thread && npx rslib build) && (cd plugin && npx rslib build)",
-    "dev": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build --watch) & (cd main-thread && npx rslib build --watch) & (cd plugin && npx rslib build --watch)"
+    "build": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build) && (cd main-thread && npx rslib build) && (cd plugin && npx rslib build) && (cd types && npx rslib build)",
+    "dev": "(cd internal && npx tsc -p tsconfig.build.json) && (cd runtime && npx rslib build --watch) & (cd main-thread && npx rslib build --watch) & (cd plugin && npx rslib build --watch) & (cd types && npx rslib build --watch)"
   }
 }

package/plugin/dist/index.js

@@ -124,7 +124,7 @@ class VueCSSConfigPlugin {
             const hooks = __WEBPACK_EXTERNAL_MODULE__lynx_js_template_webpack_plugin_e98d2f08__.LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
             hooks.beforeEncode.tap(PLUGIN_CSS_CONFIG, (args)=>{
                 const encodeData = args['encodeData'];
-                Object.assign(encodeData.compilerOptions, this.compilerOptions);
+                Object.assign(encodeData.sourceContent.config, this.compilerOptions);
                 return args;
             });
         });

package/runtime/dist/index.js

@@ -11,6 +11,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__shadow_element_js_9ed96a55__ from "./shad
 import * as __WEBPACK_EXTERNAL_MODULE__transform_to_worklet_js_80a0264f__ from "./transform-to-worklet.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Transition_js_7757bed1__ from "./Transition.js";
 import * as __WEBPACK_EXTERNAL_MODULE__TransitionGroup_js_57fa4188__ from "./TransitionGroup.js";
+import * as __WEBPACK_EXTERNAL_MODULE__use_css_vars_js_e5c8a1ca__ from "./use-css-vars.js";
 const _renderer = (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.createRenderer)(__WEBPACK_EXTERNAL_MODULE__node_ops_js_cd9e4a71__.nodeOps);
 const _createApp = _renderer.createApp;
 const _render = _renderer.render;
@@ -264,6 +265,7 @@ var __webpack_exports__transformToWorklet = __WEBPACK_EXTERNAL_MODULE__transform
 var __webpack_exports__triggerRef = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.triggerRef;
 var __webpack_exports__unref = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.unref;
 var __webpack_exports__useAttrs = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.useAttrs;
+var __webpack_exports__useCssVars = __WEBPACK_EXTERNAL_MODULE__use_css_vars_js_e5c8a1ca__.useCssVars;
 var __webpack_exports__useId = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.useId;
 var __webpack_exports__useMainThreadRef = __WEBPACK_EXTERNAL_MODULE__main_thread_ref_js_622e3a2a__.useMainThreadRef;
 var __webpack_exports__useModel = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.useModel;
@@ -280,4 +282,4 @@ var __webpack_exports__withDefaults = __WEBPACK_EXTERNAL_MODULE__vue_runtime_cor
 var __webpack_exports__withDirectives = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withDirectives;
 var __webpack_exports__withMemo = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withMemo;
 var __webpack_exports__withScopeId = __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.withScopeId;
-export { KeepAlive, Static, Teleport, _render, createApp, createStaticVNode, nextTick, onActivated, onDeactivated, onServerPrefetch, resetForTesting, useSSRContext, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers, __webpack_exports__Comment as Comment, __webpack_exports__Fragment as Fragment, __webpack_exports__MainThreadRef as MainThreadRef, __webpack_exports__ShadowElement as ShadowElement, __webpack_exports__Suspense as Suspense, __webpack_exports__Text as Text, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__camelize as camelize, __webpack_exports__capitalize as capitalize, __webpack_exports__cloneVNode as cloneVNode, __webpack_exports__computed as computed, __webpack_exports__createBlock as createBlock, __webpack_exports__createCommentVNode as createCommentVNode, __webpack_exports__createElementBlock as createElementBlock, __webpack_exports__createElementVNode as createElementVNode, __webpack_exports__createPageRoot as createPageRoot, __webpack_exports__createSlots as createSlots, __webpack_exports__createTextVNode as createTextVNode, __webpack_exports__createVNode as createVNode, __webpack_exports__customRef as customRef, __webpack_exports__defineAsyncComponent as defineAsyncComponent, __webpack_exports__defineComponent as defineComponent, __webpack_exports__defineEmits as defineEmits, __webpack_exports__defineExpose as defineExpose, __webpack_exports__defineModel as defineModel, __webpack_exports__defineOptions as defineOptions, __webpack_exports__defineProps as defineProps, __webpack_exports__defineSlots as defineSlots, __webpack_exports__effectScope as effectScope, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__getCurrentScope as getCurrentScope, __webpack_exports__guardReactiveProps as guardReactiveProps, __webpack_exports__h as h, __webpack_exports__hasInjectionContext as hasInjectionContext, __webpack_exports__inject as inject, __webpack_exports__isProxy as isProxy, __webpack_exports__isReactive as isReactive, __webpack_exports__isReadonly as isReadonly, __webpack_exports__isRef as isRef, __webpack_exports__isShallow as isShallow, __webpack_exports__isVNode as isVNode, __webpack_exports__markRaw as markRaw, __webpack_exports__mergeProps as mergeProps, __webpack_exports__nodeOps as nodeOps, __webpack_exports__normalizeClass as normalizeClass, __webpack_exports__normalizeProps as normalizeProps, __webpack_exports__normalizeStyle as normalizeStyle, __webpack_exports__onBeforeMount as onBeforeMount, __webpack_exports__onBeforeUnmount as onBeforeUnmount, __webpack_exports__onBeforeUpdate as onBeforeUpdate, __webpack_exports__onErrorCaptured as onErrorCaptured, __webpack_exports__onMounted as onMounted, __webpack_exports__onRenderTracked as onRenderTracked, __webpack_exports__onRenderTriggered as onRenderTriggered, __webpack_exports__onScopeDispose as onScopeDispose, __webpack_exports__onUnmounted as onUnmounted, __webpack_exports__onUpdated as onUpdated, __webpack_exports__onWatcherCleanup as onWatcherCleanup, __webpack_exports__openBlock as openBlock, __webpack_exports__popScopeId as popScopeId, __webpack_exports__provide as provide, __webpack_exports__pushScopeId as pushScopeId, __webpack_exports__reactive as reactive, __webpack_exports__readonly as readonly, __webpack_exports__ref as ref, __webpack_exports__renderList as renderList, __webpack_exports__renderSlot as renderSlot, __webpack_exports__resolveComponent as resolveComponent, __webpack_exports__resolveDirective as resolveDirective, __webpack_exports__resolveDynamicComponent as resolveDynamicComponent, __webpack_exports__runOnBackground as runOnBackground, __webpack_exports__runOnMainThread as runOnMainThread, __webpack_exports__setBlockTracking as setBlockTracking, __webpack_exports__shallowReactive as shallowReactive, __webpack_exports__shallowReadonly as shallowReadonly, __webpack_exports__shallowRef as shallowRef, __webpack_exports__takeOps as takeOps, __webpack_exports__toDisplayString as toDisplayString, __webpack_exports__toHandlerKey as toHandlerKey, __webpack_exports__toHandlers as toHandlers, __webpack_exports__toRaw as toRaw, __webpack_exports__toRef as toRef, __webpack_exports__toRefs as toRefs, __webpack_exports__toValue as toValue, __webpack_exports__transformToWorklet as transformToWorklet, __webpack_exports__triggerRef as triggerRef, __webpack_exports__unref as unref, __webpack_exports__useAttrs as useAttrs, __webpack_exports__useId as useId, __webpack_exports__useMainThreadRef as useMainThreadRef, __webpack_exports__useModel as useModel, __webpack_exports__useSlots as useSlots, __webpack_exports__useTemplateRef as useTemplateRef, __webpack_exports__version as version, __webpack_exports__watch as watch, __webpack_exports__watchEffect as watchEffect, __webpack_exports__watchPostEffect as watchPostEffect, __webpack_exports__watchSyncEffect as watchSyncEffect, __webpack_exports__withAsyncContext as withAsyncContext, __webpack_exports__withCtx as withCtx, __webpack_exports__withDefaults as withDefaults, __webpack_exports__withDirectives as withDirectives, __webpack_exports__withMemo as withMemo, __webpack_exports__withScopeId as withScopeId };
+export { KeepAlive, Static, Teleport, _render, createApp, createStaticVNode, nextTick, onActivated, onDeactivated, onServerPrefetch, resetForTesting, useSSRContext, vModelCheckbox, vModelRadio, vModelSelect, vModelText, vShow, withKeys, withModifiers, __webpack_exports__Comment as Comment, __webpack_exports__Fragment as Fragment, __webpack_exports__MainThreadRef as MainThreadRef, __webpack_exports__ShadowElement as ShadowElement, __webpack_exports__Suspense as Suspense, __webpack_exports__Text as Text, __webpack_exports__Transition as Transition, __webpack_exports__TransitionGroup as TransitionGroup, __webpack_exports__camelize as camelize, __webpack_exports__capitalize as capitalize, __webpack_exports__cloneVNode as cloneVNode, __webpack_exports__computed as computed, __webpack_exports__createBlock as createBlock, __webpack_exports__createCommentVNode as createCommentVNode, __webpack_exports__createElementBlock as createElementBlock, __webpack_exports__createElementVNode as createElementVNode, __webpack_exports__createPageRoot as createPageRoot, __webpack_exports__createSlots as createSlots, __webpack_exports__createTextVNode as createTextVNode, __webpack_exports__createVNode as createVNode, __webpack_exports__customRef as customRef, __webpack_exports__defineAsyncComponent as defineAsyncComponent, __webpack_exports__defineComponent as defineComponent, __webpack_exports__defineEmits as defineEmits, __webpack_exports__defineExpose as defineExpose, __webpack_exports__defineModel as defineModel, __webpack_exports__defineOptions as defineOptions, __webpack_exports__defineProps as defineProps, __webpack_exports__defineSlots as defineSlots, __webpack_exports__effectScope as effectScope, __webpack_exports__getCurrentInstance as getCurrentInstance, __webpack_exports__getCurrentScope as getCurrentScope, __webpack_exports__guardReactiveProps as guardReactiveProps, __webpack_exports__h as h, __webpack_exports__hasInjectionContext as hasInjectionContext, __webpack_exports__inject as inject, __webpack_exports__isProxy as isProxy, __webpack_exports__isReactive as isReactive, __webpack_exports__isReadonly as isReadonly, __webpack_exports__isRef as isRef, __webpack_exports__isShallow as isShallow, __webpack_exports__isVNode as isVNode, __webpack_exports__markRaw as markRaw, __webpack_exports__mergeProps as mergeProps, __webpack_exports__nodeOps as nodeOps, __webpack_exports__normalizeClass as normalizeClass, __webpack_exports__normalizeProps as normalizeProps, __webpack_exports__normalizeStyle as normalizeStyle, __webpack_exports__onBeforeMount as onBeforeMount, __webpack_exports__onBeforeUnmount as onBeforeUnmount, __webpack_exports__onBeforeUpdate as onBeforeUpdate, __webpack_exports__onErrorCaptured as onErrorCaptured, __webpack_exports__onMounted as onMounted, __webpack_exports__onRenderTracked as onRenderTracked, __webpack_exports__onRenderTriggered as onRenderTriggered, __webpack_exports__onScopeDispose as onScopeDispose, __webpack_exports__onUnmounted as onUnmounted, __webpack_exports__onUpdated as onUpdated, __webpack_exports__onWatcherCleanup as onWatcherCleanup, __webpack_exports__openBlock as openBlock, __webpack_exports__popScopeId as popScopeId, __webpack_exports__provide as provide, __webpack_exports__pushScopeId as pushScopeId, __webpack_exports__reactive as reactive, __webpack_exports__readonly as readonly, __webpack_exports__ref as ref, __webpack_exports__renderList as renderList, __webpack_exports__renderSlot as renderSlot, __webpack_exports__resolveComponent as resolveComponent, __webpack_exports__resolveDirective as resolveDirective, __webpack_exports__resolveDynamicComponent as resolveDynamicComponent, __webpack_exports__runOnBackground as runOnBackground, __webpack_exports__runOnMainThread as runOnMainThread, __webpack_exports__setBlockTracking as setBlockTracking, __webpack_exports__shallowReactive as shallowReactive, __webpack_exports__shallowReadonly as shallowReadonly, __webpack_exports__shallowRef as shallowRef, __webpack_exports__takeOps as takeOps, __webpack_exports__toDisplayString as toDisplayString, __webpack_exports__toHandlerKey as toHandlerKey, __webpack_exports__toHandlers as toHandlers, __webpack_exports__toRaw as toRaw, __webpack_exports__toRef as toRef, __webpack_exports__toRefs as toRefs, __webpack_exports__toValue as toValue, __webpack_exports__transformToWorklet as transformToWorklet, __webpack_exports__triggerRef as triggerRef, __webpack_exports__unref as unref, __webpack_exports__useAttrs as useAttrs, __webpack_exports__useCssVars as useCssVars, __webpack_exports__useId as useId, __webpack_exports__useMainThreadRef as useMainThreadRef, __webpack_exports__useModel as useModel, __webpack_exports__useSlots as useSlots, __webpack_exports__useTemplateRef as useTemplateRef, __webpack_exports__version as version, __webpack_exports__watch as watch, __webpack_exports__watchEffect as watchEffect, __webpack_exports__watchPostEffect as watchPostEffect, __webpack_exports__watchSyncEffect as watchSyncEffect, __webpack_exports__withAsyncContext as withAsyncContext, __webpack_exports__withCtx as withCtx, __webpack_exports__withDefaults as withDefaults, __webpack_exports__withDirectives as withDirectives, __webpack_exports__withMemo as withMemo, __webpack_exports__withScopeId as withScopeId };

package/runtime/dist/use-css-vars.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Lynx-specific implementation of Vue's `useCssVars`.
+ *
+ * Vue's SFC compiler transforms `v-bind(expr)` inside a `<style>` block into:
+ * - CSS:  `color: var(--v33993c7f)`
+ * - JS:   `useCssVars(_ctx => ({ "v33993c7f": _ctx.textColor }))`
+ *
+ * The standard `@vue/runtime-dom` version uses DOM APIs (`el.style.setProperty`)
+ * which are unavailable in Lynx's Background Thread.  This implementation
+ * instead merges the CSS variables into the element's inline style and sends
+ * them to the Main Thread via the ops pipeline.
+ *
+ * Requires `enableCSSInlineVariables: true` and `enableCSSInheritance: true`
+ * in `lynx.config.ts` so the Lynx engine propagates `--*` inline-style vars
+ * to descendant elements.
+ *
+ * @hidden
+ */
+export declare function useCssVars(getter: (ctx: unknown) => Record<string, string>): void;

package/runtime/dist/use-css-vars.js

@@ -0,0 +1,46 @@
+import * as __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__ from "@vue/runtime-core";
+import * as __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__ from "./ops.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__ from "./flush.js";
+import * as __WEBPACK_EXTERNAL_MODULE__shadow_element_js_9ed96a55__ from "./shadow-element.js";
+const SF_ELEMENT = 1;
+const SF_COMPONENT = 6;
+const SF_ARRAY_CHILDREN = 16;
+function applyVarsToEl(el, vars) {
+    const style = {
+        ...el._style
+    };
+    for(const key in vars)style[`--${key}`] = vars[key];
+    const effective = el._vShowHidden ? {
+        ...style,
+        display: 'none'
+    } : style;
+    (0, __WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.pushOp)(__WEBPACK_EXTERNAL_MODULE__ops_js_e08da98b__.OP.SET_STYLE, el.id, effective);
+    (0, __WEBPACK_EXTERNAL_MODULE__flush_js_a3609ebe__.scheduleFlush)();
+}
+function applyVarsToVNode(vnode, vars) {
+    if (!vnode) return;
+    const { shapeFlag, el } = vnode;
+    if (shapeFlag & SF_ELEMENT) {
+        if (el instanceof __WEBPACK_EXTERNAL_MODULE__shadow_element_js_9ed96a55__.ShadowElement) applyVarsToEl(el, vars);
+    } else if (shapeFlag & SF_COMPONENT) {
+        if (vnode.component) applyVarsToVNode(vnode.component.subTree, vars);
+    } else if (vnode.type === __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.Fragment && shapeFlag & SF_ARRAY_CHILDREN) {
+        const children = vnode.children;
+        for (const child of children)applyVarsToVNode(child, vars);
+    }
+}
+function useCssVars(getter) {
+    const instance = (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.getCurrentInstance)();
+    if (!instance) return;
+    const setVars = ()=>{
+        const vars = getter(instance.proxy);
+        applyVarsToVNode(instance.subTree, vars);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onMounted)(()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.watchPostEffect)(setVars);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.onBeforeUpdate)(()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE__vue_runtime_core_f9f3aead__.queuePostFlushCb)(setVars);
+    });
+}
+export { useCssVars };

package/types/dist/elements/index.d.ts

@@ -0,0 +1,16 @@
+import type { DefineComponent } from "vue";
+import type { IntrinsicElements } from '@lynx-js/types';
+type ExtractBindAsOn<T> = {
+    [P in keyof T as P extends `bind${infer Rest}` ? `on${Capitalize<Rest>}` : never]: T[P];
+};
+type NonBindProps<T> = Omit<T, `bind${string}` | 'className'>;
+type VueLynxProps<T> = ExtractBindAsOn<T> & NonBindProps<T>;
+type VueLynxComponent<T> = DefineComponent<VueLynxProps<T>>;
+export type VueLynxElements = {
+    [K in keyof IntrinsicElements]: VueLynxComponent<IntrinsicElements[K]>;
+};
+declare module "vue" {
+    interface GlobalComponents extends VueLynxElements {
+    }
+}
+export {};

package/types/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/types/dist/volar-plugin.cjs

@@ -0,0 +1,26 @@
+const nativeTags = [
+    'block',
+    'template',
+    'slot'
+];
+module.exports = [
+    ({ vueCompilerOptions })=>{
+        vueCompilerOptions.nativeTags = nativeTags;
+        return {
+            version: 1
+        };
+    },
+    ({ vueCompilerOptions })=>{
+        vueCompilerOptions.nativeTags = nativeTags;
+        return {
+            version: 2
+        };
+    },
+    ()=>({
+            version: 2,
+            resolveTemplateCompilerOptions (options) {
+                options.isNativeTag = (tag)=>nativeTags.includes(tag);
+                return options;
+            }
+        })
+];