@fragmentsx/render-web 0.1.0 → 0.1.2

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
@@ -2104,13 +2106,18 @@ const getAreaListQuery = (areaCodes) => {
   };
 };
 const fetchPlugin = (state) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const isSelf = ((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf) ?? false;
   const url = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.backendEndpoint;
   const apiToken = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.apiToken;
-  const fetcher = createFetcher(url, {
+  const referer = (_d = state == null ? void 0 : state.env) == null ? void 0 : _d.referer;
+  let headers = {
     Authorization: `Bearer ${apiToken}`
-  });
+  };
+  if (referer) {
+    headers.Referer = referer;
+  }
+  const fetcher = createFetcher(url, headers);
   const beaconFetcher = fetchBeacon();
   const queryFragment = async (fragmentId) => {
     var _a2;
@@ -2184,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);
       });
@@ -2336,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("")}}`;
     }
   );
@@ -2419,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");
@@ -2695,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
       });
@@ -2736,8 +2750,9 @@ const createFragmentsClient = (options) => {
       (state) => {
         state.env = {
           isSelf: (options == null ? void 0 : options.isSelf) ?? false,
-          backendEndpoint: BACKEND_TARGET,
-          apiToken: options == null ? void 0 : options.apiToken
+          backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? BACKEND_TARGET,
+          apiToken: options == null ? void 0 : options.apiToken,
+          referer: options == null ? void 0 : options.referer
         };
       },
       fetchPlugin,
@@ -5403,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
@@ -5832,8 +5852,8 @@ const useLayerStyles = (layerKey) => {
       ...layout,
       ...layerSize,
       ...textStyles,
-      display,
-      "user-select": "none"
+      display
+      // "user-select": "none",
       // ...cssOverride,
     };
   } catch (e2) {

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
@@ -2103,13 +2105,18 @@ const getAreaListQuery = (areaCodes) => {
   };
 };
 const fetchPlugin = (state) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const isSelf = ((_a = state == null ? void 0 : state.env) == null ? void 0 : _a.isSelf) ?? false;
   const url = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.backendEndpoint;
   const apiToken = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.apiToken;
-  const fetcher = createFetcher(url, {
+  const referer = (_d = state == null ? void 0 : state.env) == null ? void 0 : _d.referer;
+  let headers = {
     Authorization: `Bearer ${apiToken}`
-  });
+  };
+  if (referer) {
+    headers.Referer = referer;
+  }
+  const fetcher = createFetcher(url, headers);
   const beaconFetcher = fetchBeacon();
   const queryFragment = async (fragmentId) => {
     var _a2;
@@ -2183,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);
       });
@@ -2335,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("")}}`;
     }
   );
@@ -2418,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");
@@ -2694,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
       });
@@ -2735,8 +2749,9 @@ const createFragmentsClient = (options) => {
       (state) => {
         state.env = {
           isSelf: (options == null ? void 0 : options.isSelf) ?? false,
-          backendEndpoint: BACKEND_TARGET,
-          apiToken: options == null ? void 0 : options.apiToken
+          backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? BACKEND_TARGET,
+          apiToken: options == null ? void 0 : options.apiToken,
+          referer: options == null ? void 0 : options.referer
         };
       },
       fetchPlugin,
@@ -5402,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
@@ -5831,8 +5851,8 @@ const useLayerStyles = (layerKey) => {
       ...layout,
       ...layerSize,
       ...textStyles,
-      display,
-      "user-select": "none"
+      display
+      // "user-select": "none",
       // ...cssOverride,
     };
   } catch (e2) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fragmentsx/render-web",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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.2",
     "@fragmentsx/definition": "0.1.0",
     "@fragmentsx/render-core": "0.1.0",
-    "@fragmentsx/utils": "0.1.0",
-    "@fragmentsx/client-core": "0.1.0"
+    "@fragmentsx/utils": "0.1.0"
   },
   "devDependencies": {
     "@graph-state/plugin-logger": "^0.3.0",