@builder.io/sdk-svelte 0.0.1-3 → 0.0.1-32

package/src/components/render-content/components/render-styles.svelte

@@ -1,27 +1,36 @@
-<script>
-    
-    
-    
-    
-  import  RenderInlinedStyles,  {  }  from '../../render-inlined-styles.svelte';
+<script context="module" lang="ts">
+  interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+      [key: string]: string;
+    };
+  }
+
+  interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+  }
+</script>
 
-  
+<script lang="ts">
+  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
 
-    
+  export let cssCode: Props["cssCode"];
+  export let customFonts: Props["customFonts"];
 
-    
-    export let cssCode;
-export let customFonts;
-    
-    function getCssFromFont(font) {
-// TODO: compute what font sizes are used and only load those.......
-const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
-const name = family.split(',')[0];
-const url = font.fileUrl ?? font?.files?.regular;
-let str = '';
+  const getCssFromFont = function getCssFromFont(font) {
+    // TODO: compute what font sizes are used and only load those.......
+    const family =
+      font.family +
+      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = "";
 
-if (url && family && name) {
-  str += `
+    if (url && family && name) {
+      str += `
 @font-face {
   font-family: "${family}";
   src: local("${name}"), url('${url}') format('woff2');
@@ -29,21 +38,20 @@ if (url && family && name) {
   font-weight: 400;
 }
         `.trim();
-}
-
-if (font.files) {
-  for (const weight in font.files) {
-    const isNumber = String(Number(weight)) === weight;
+    }
 
-    if (!isNumber) {
-      continue;
-    } // TODO: maybe limit number loaded
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
 
+        if (!isNumber) {
+          continue;
+        } // TODO: maybe limit number loaded
 
-    const weightUrl = font.files[weight];
+        const weightUrl = font.files[weight];
 
-    if (weightUrl && weightUrl !== url) {
-      str += `
+        if (weightUrl && weightUrl !== url) {
+          str += `
 @font-face {
   font-family: "${family}";
   src: url('${weightUrl}') format('woff2');
@@ -51,40 +59,28 @@ if (font.files) {
   font-weight: ${weight};
 }
           `.trim();
+        }
+      }
     }
-  }
-}
-
-return str;
-}
 
-function getFontCss({
-customFonts
-}) {
-// TODO: flag for this
-// if (!builder.allowCustomFonts) {
-//   return '';
-// }
-// TODO: separate internal data from external
-return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
-}
-    $: injectedStyles = () => {
-return `
-${cssCode || ''}
+    return str;
+  };
+
+  const getFontCss = function getFontCss({ customFonts }) {
+    // TODO: flag for this
+    // if (!builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
+  };
+  $: injectedStyles = () => {
+    return `
+${cssCode || ""}
 ${getFontCss({
-  customFonts: customFonts
+  customFonts: customFonts,
 })}`;
-};
-
-    
-    
-    
-
-    
-
-    
-
-    
-  </script>
+  };
+</script>
 
-  <RenderInlinedStyles  styles={injectedStyles()} ></RenderInlinedStyles>
+<RenderInlinedStyles styles={injectedStyles()} />

package/src/components/render-content/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.svelte";
+export {
+  default2 as default
+};