@fragmentsx/render-web 0.1.1 → 0.1.3

package/dist/index.cjs.js

@@ -2083,6 +2083,8 @@ const getAreaListQuery = (areaCodes) => {
   return {
     query: `query($areaCodes: [String!]!) {
   clientAreas(areaCodes: $areaCodes) {
+        areaProperties
+projectProperties
         variant {
           fragment {
               props
@@ -2189,9 +2191,16 @@ const fetchPlugin = (state) => {
             )
           );
         }
+        const resultProps = [
+          ...area.projectProperties ?? [],
+          ...area.areaProperties ?? []
+        ].reduce((acc, prop) => {
+          acc[prop._id] = prop.defaultValue;
+          return acc;
+        }, area.variant.fragment.props);
         const entity = {
           fragmentId: area.variant.fragment.fragment.id,
-          props: area.variant.fragment.props
+          props: resultProps
         };
         state.$fetch.cacheAreaDocuments.set(areaCode, entity);
       });
@@ -2341,7 +2350,8 @@ function generateSmallerCssBlocks(layerResolver, group, cssMaker) {
     (smallerLayer, index2, arr) => {
       const smallerChildren = getAllChildren(layerResolver, smallerLayer);
       const smallerCssBlocks = smallerChildren.map(cssMaker);
-      const max = index2 === 0 ? group.primary.width - 1 : arr[index2 - 1].width;
+      const primaryLayer = layerResolver(group.primary);
+      const max = index2 === 0 ? (primaryLayer == null ? void 0 : primaryLayer.width) - 1 : arr[index2 - 1].width;
       return `@container (max-width: ${max}px) {${smallerCssBlocks.map(buildCssBlock).join("")}}`;
     }
   );
@@ -2424,7 +2434,7 @@ const fragmentStylesheetPlugin = (state) => {
   };
   return state;
 };
-const globalCss = '[data-key^="Fragment"] {\n    [data-key^="Text"] {\n        p {\n            margin: 0;\n            font-size: 14px;\n            color: #000;\n            font-weight: 400;\n        }\n    }\n\n    /* 1. Use a more-intuitive box-sizing model */\n\n    *, *::before, *::after {\n        box-sizing: border-box;\n    }\n\n    /* 2. Remove default margin */\n\n    * {\n        margin: 0;\n    }\n\n    /* 3. Enable keyword animations */\n    @media (prefers-reduced-motion: no-preference) {\n        html {\n            interpolate-size: allow-keywords;\n        }\n    }\n\n    body {\n        /* 4. Add accessible line-height */\n        line-height: 1.5;\n        /* 5. Improve text rendering */\n        -webkit-font-smoothing: antialiased;\n    }\n\n    /* 6. Improve media defaults */\n\n    img, picture, video, canvas, svg {\n        display: block;\n        max-width: 100%;\n    }\n\n    /* 7. Inherit fonts for form controls */\n\n    input, button, textarea, select {\n        font: inherit;\n    }\n\n    /* 8. Avoid text overflows */\n\n    p, h1, h2, h3, h4, h5, h6 {\n        overflow-wrap: break-word;\n    }\n\n    /*\n      10. Create a root stacking context\n    */\n\n    #root, #__next {\n        isolation: isolate;\n    }\n\n    a {\n        text-decoration: none;\n    }\n}\n';
+const globalCss = '[data-key^="Fragment"] {\n    [data-key^="Text"] {\n        p {\n            margin: 0;\n            font-size: 14px;\n            color: #000;\n            font-weight: 400;\n        }\n    }\n\n    ul, ol {\n        padding: 0;\n    }\n\n    /* 1. Use a more-intuitive box-sizing model */\n\n    *, *::before, *::after {\n        box-sizing: border-box;\n    }\n\n    /* 2. Remove default margin */\n\n    * {\n        margin: 0;\n    }\n\n    /* 3. Enable keyword animations */\n    @media (prefers-reduced-motion: no-preference) {\n        html {\n            interpolate-size: allow-keywords;\n        }\n    }\n\n    body {\n        /* 4. Add accessible line-height */\n        line-height: 1.5;\n        /* 5. Improve text rendering */\n        -webkit-font-smoothing: antialiased;\n    }\n\n    /* 6. Improve media defaults */\n\n    img, picture, video, canvas, svg {\n        display: block;\n        max-width: 100%;\n    }\n\n    /* 7. Inherit fonts for form controls */\n\n    input, button, textarea, select {\n        font: inherit;\n    }\n\n    /* 8. Avoid text overflows */\n\n    p, h1, h2, h3, h4, h5, h6 {\n        overflow-wrap: break-word;\n    }\n\n    /*\n      10. Create a root stacking context\n    */\n\n    #root, #__next {\n        isolation: isolate;\n    }\n\n    a {\n        text-decoration: none;\n    }\n}\n';
 const globalStylesheetPlugin = (state) => {
   if (!("$fragments" in state)) {
     throw new Error("GlobalStylesheetPlugin need $fragments plugin");
@@ -2700,7 +2710,6 @@ const loadPlugin = (state) => {
     const loader = async () => {
       var _a2;
       const areaEntity = await ((_a2 = state == null ? void 0 : state.$fetch) == null ? void 0 : _a2.queryArea(areaCode));
-      console.log(areaEntity);
       await loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId, {
         suspense: false
       });
@@ -5409,12 +5418,17 @@ const useReadVariable = (variableKey) => {
         layer: null
       };
     }
-    const instanceScope = scopes.findLast(
+    let instanceScope = scopes.findLast(
       (scope) => {
         var _a2;
         return (scope == null ? void 0 : scope.type) === index.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
       }
     );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === index.scopeTypes.InstanceScope
+      );
+    }
     const variableLayer = resolveVariableLayer(
       instanceScope == null ? void 0 : instanceScope.documentManager,
       variableKey2
@@ -5838,8 +5852,8 @@ const useLayerStyles = (layerKey) => {
       ...layout,
       ...layerSize,
       ...textStyles,
-      display,
-      "user-select": "none"
+      display
+      // "user-select": "none",
       // ...cssOverride,
     };
   } catch (e2) {
@@ -6341,6 +6355,10 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = d(queryArea(options2.areaCode));
+  const resultProps = T$1(
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
+    [areaData, options2]
+  );
   y$2(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -6351,6 +6369,7 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };

package/dist/index.es.js

@@ -2082,6 +2082,8 @@ const getAreaListQuery = (areaCodes) => {
   return {
     query: `query($areaCodes: [String!]!) {
   clientAreas(areaCodes: $areaCodes) {
+        areaProperties
+projectProperties
         variant {
           fragment {
               props
@@ -2188,9 +2190,16 @@ const fetchPlugin = (state) => {
             )
           );
         }
+        const resultProps = [
+          ...area.projectProperties ?? [],
+          ...area.areaProperties ?? []
+        ].reduce((acc, prop) => {
+          acc[prop._id] = prop.defaultValue;
+          return acc;
+        }, area.variant.fragment.props);
         const entity = {
           fragmentId: area.variant.fragment.fragment.id,
-          props: area.variant.fragment.props
+          props: resultProps
         };
         state.$fetch.cacheAreaDocuments.set(areaCode, entity);
       });
@@ -2340,7 +2349,8 @@ function generateSmallerCssBlocks(layerResolver, group, cssMaker) {
     (smallerLayer, index2, arr) => {
       const smallerChildren = getAllChildren(layerResolver, smallerLayer);
       const smallerCssBlocks = smallerChildren.map(cssMaker);
-      const max = index2 === 0 ? group.primary.width - 1 : arr[index2 - 1].width;
+      const primaryLayer = layerResolver(group.primary);
+      const max = index2 === 0 ? (primaryLayer == null ? void 0 : primaryLayer.width) - 1 : arr[index2 - 1].width;
       return `@container (max-width: ${max}px) {${smallerCssBlocks.map(buildCssBlock).join("")}}`;
     }
   );
@@ -2423,7 +2433,7 @@ const fragmentStylesheetPlugin = (state) => {
   };
   return state;
 };
-const globalCss = '[data-key^="Fragment"] {\n    [data-key^="Text"] {\n        p {\n            margin: 0;\n            font-size: 14px;\n            color: #000;\n            font-weight: 400;\n        }\n    }\n\n    /* 1. Use a more-intuitive box-sizing model */\n\n    *, *::before, *::after {\n        box-sizing: border-box;\n    }\n\n    /* 2. Remove default margin */\n\n    * {\n        margin: 0;\n    }\n\n    /* 3. Enable keyword animations */\n    @media (prefers-reduced-motion: no-preference) {\n        html {\n            interpolate-size: allow-keywords;\n        }\n    }\n\n    body {\n        /* 4. Add accessible line-height */\n        line-height: 1.5;\n        /* 5. Improve text rendering */\n        -webkit-font-smoothing: antialiased;\n    }\n\n    /* 6. Improve media defaults */\n\n    img, picture, video, canvas, svg {\n        display: block;\n        max-width: 100%;\n    }\n\n    /* 7. Inherit fonts for form controls */\n\n    input, button, textarea, select {\n        font: inherit;\n    }\n\n    /* 8. Avoid text overflows */\n\n    p, h1, h2, h3, h4, h5, h6 {\n        overflow-wrap: break-word;\n    }\n\n    /*\n      10. Create a root stacking context\n    */\n\n    #root, #__next {\n        isolation: isolate;\n    }\n\n    a {\n        text-decoration: none;\n    }\n}\n';
+const globalCss = '[data-key^="Fragment"] {\n    [data-key^="Text"] {\n        p {\n            margin: 0;\n            font-size: 14px;\n            color: #000;\n            font-weight: 400;\n        }\n    }\n\n    ul, ol {\n        padding: 0;\n    }\n\n    /* 1. Use a more-intuitive box-sizing model */\n\n    *, *::before, *::after {\n        box-sizing: border-box;\n    }\n\n    /* 2. Remove default margin */\n\n    * {\n        margin: 0;\n    }\n\n    /* 3. Enable keyword animations */\n    @media (prefers-reduced-motion: no-preference) {\n        html {\n            interpolate-size: allow-keywords;\n        }\n    }\n\n    body {\n        /* 4. Add accessible line-height */\n        line-height: 1.5;\n        /* 5. Improve text rendering */\n        -webkit-font-smoothing: antialiased;\n    }\n\n    /* 6. Improve media defaults */\n\n    img, picture, video, canvas, svg {\n        display: block;\n        max-width: 100%;\n    }\n\n    /* 7. Inherit fonts for form controls */\n\n    input, button, textarea, select {\n        font: inherit;\n    }\n\n    /* 8. Avoid text overflows */\n\n    p, h1, h2, h3, h4, h5, h6 {\n        overflow-wrap: break-word;\n    }\n\n    /*\n      10. Create a root stacking context\n    */\n\n    #root, #__next {\n        isolation: isolate;\n    }\n\n    a {\n        text-decoration: none;\n    }\n}\n';
 const globalStylesheetPlugin = (state) => {
   if (!("$fragments" in state)) {
     throw new Error("GlobalStylesheetPlugin need $fragments plugin");
@@ -2699,7 +2709,6 @@ const loadPlugin = (state) => {
     const loader = async () => {
       var _a2;
       const areaEntity = await ((_a2 = state == null ? void 0 : state.$fetch) == null ? void 0 : _a2.queryArea(areaCode));
-      console.log(areaEntity);
       await loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId, {
         suspense: false
       });
@@ -5408,12 +5417,17 @@ const useReadVariable = (variableKey) => {
         layer: null
       };
     }
-    const instanceScope = scopes.findLast(
+    let instanceScope = scopes.findLast(
       (scope) => {
         var _a2;
         return (scope == null ? void 0 : scope.type) === index.scopeTypes.InstanceScope && !!((_a2 = scope.documentManager) == null ? void 0 : _a2.resolve(variableKey2));
       }
     );
+    if (!instanceScope) {
+      instanceScope = scopes.find(
+        (scope) => (scope == null ? void 0 : scope.type) === index.scopeTypes.InstanceScope
+      );
+    }
     const variableLayer = resolveVariableLayer(
       instanceScope == null ? void 0 : instanceScope.documentManager,
       variableKey2
@@ -5837,8 +5851,8 @@ const useLayerStyles = (layerKey) => {
       ...layout,
       ...layerSize,
       ...textStyles,
-      display,
-      "user-select": "none"
+      display
+      // "user-select": "none",
       // ...cssOverride,
     };
   } catch (e2) {
@@ -6340,6 +6354,10 @@ const useArea = (options2) => {
     options2 == null ? void 0 : options2.globalManager
   );
   const [areaData, setAreaData] = d(queryArea(options2.areaCode));
+  const resultProps = T$1(
+    () => ({ ...(areaData == null ? void 0 : areaData.props) ?? {}, ...(options2 == null ? void 0 : options2.props) ?? [] }),
+    [areaData, options2]
+  );
   y$2(() => {
     (async () => {
       const response = await queryArea(options2.areaCode);
@@ -6350,6 +6368,7 @@ const useArea = (options2) => {
   }, []);
   return {
     ...areaData,
+    props: resultProps,
     globalManager: resultGlobalManager
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-web",
   "private": false,
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "dist"
@@ -24,10 +24,10 @@
   "dependencies": {
     "@graph-state/checkers": "^0.1.2",
     "@graph-state/core": "^0.13.0",
-    "@fragmentsx/client-core": "0.1.1",
-    "@fragmentsx/render-core": "0.1.0",
+    "@fragmentsx/client-core": "0.1.3",
     "@fragmentsx/definition": "0.1.0",
-    "@fragmentsx/utils": "0.1.0"
+    "@fragmentsx/utils": "0.1.0",
+    "@fragmentsx/render-core": "0.1.1"
   },
   "devDependencies": {
     "@graph-state/plugin-logger": "^0.3.0",