@lark.js/mvc 0.0.3 → 0.0.5

package/dist/webpack.cjs

@@ -14735,7 +14735,7 @@ function convertArtSyntax(source, debug) {
   }
   if (blockStack.length > 0) {
     const unclosed = blockStack.map((b) => `"${b.ctrl}" at line ${b.line}`).join(", ");
-    throw new Error(`[@lark/mvc error] unclosed block(s): ${unclosed}`);
+    throw new Error(`[@lark.js/mvc error] unclosed block(s): ${unclosed}`);
   }
   return result.join("");
 }
@@ -14812,7 +14812,7 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
     return `${debugPrefix}<%for(${forExpr}){%>`;
   }
   const tokens = code.split(/\s+/);
-  const keyword = tokens.shift();
+  const keyword = tokens.shift() ?? "";
   switch (keyword) {
     case "if": {
       blockStack.push({ ctrl: "if", line: lineNo });
@@ -14829,12 +14829,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       }
       return `${debugPrefix}<%}else{%>`;
     }
-    case "each": {
-      blockStack.push({ ctrl: "each", line: lineNo });
+    case "forOf": {
+      blockStack.push({ ctrl: "forOf", line: lineNo });
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[@lark/mvc error] bad each syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{each list as item [index]}}`
+          `[@lark.js/mvc error] bad forOf syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{forOf list as item [index]}}`
         );
       }
       const restTokens = tokens.slice(2);
@@ -14856,12 +14856,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       }
       return `${debugPrefix}<%for(let ${index}=0${refExpr},${refObjCount}=${refObj}.length${lastCount};${index}<${refObjCount};${index}++){${firstAndLast}${valueDecl}%>`;
     }
-    case "parse": {
-      blockStack.push({ ctrl: "parse", line: lineNo });
+    case "forIn": {
+      blockStack.push({ ctrl: "forIn", line: lineNo });
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[@lark/mvc error] bad parse syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{for-in obj as val [key]}}`
+          `[@lark.js/mvc error] bad forIn syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{for-in obj as val [key]}}`
         );
       }
       const restTokens2 = tokens.slice(2);
@@ -14881,19 +14881,19 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
     case "set":
       return `${debugPrefix}<%let ${tokens.join(" ")};%>`;
     case "/if":
-    case "/each":
-    case "/parse":
+    case "/forOf":
+    case "/forIn":
     case "/for": {
       const expectedCtrl = keyword.substring(1);
       const last = blockStack.pop();
       if (!last) {
         throw new Error(
-          `[@lark/mvc error] unexpected {{${code}}}: no matching open block`
+          `[@lark.js/mvc error] unexpected {{${code}}}: no matching open block`
         );
       }
       if (last.ctrl !== expectedCtrl) {
         throw new Error(
-          `[@lark/mvc error] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
+          `[@lark.js/mvc error] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
         );
       }
       return `${debugPrefix}<%}%>`;
@@ -14957,7 +14957,7 @@ function parseAsExpr(expr) {
 function compileToFunction(source, debug, file) {
   const matcher = /<%([@=!:])?([\s\S]*?)%>|$/g;
   let index = 0;
-  let funcSource = `$p+='`;
+  let funcSource = `$out+='`;
   let hasAtRule = false;
   const escapeSlashRegExp = /\\|'/g;
   const escapeBreakReturnRegExp = /\r|\n/g;
@@ -14983,17 +14983,17 @@ function compileToFunction(source, debug, file) {
       }
       if (operate === "@") {
         hasAtRule = true;
-        funcSource += `'+($expr='<%${operate + expr}%>',$i($$ref,${content}))+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',$refFn($refAlt,${content}))+'`;
       } else if (operate === "=" || operate === ":") {
-        funcSource += `'+($expr='<%${operate + expr}%>',$e(${content}))+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',$encHtml(${content}))+'`;
       } else if (operate === "!") {
-        if (!content.startsWith("$eu(") || !content.endsWith(")")) {
-          content = `$n(${content})`;
+        if (!content.startsWith("$encUri(") || !content.endsWith(")")) {
+          content = `$strSafe(${content})`;
         }
-        funcSource += `'+($expr='<%${operate + expr}%>',${content})+'`;
+        funcSource += `'+($dbgExpr='<%${operate + expr}%>',${content})+'`;
       } else if (content) {
         if (line > -1) {
-          funcSource += `';$line=${line};$art='${art}';`;
+          funcSource += `';$dbgLine=${line};$dbgArt='${art}';`;
           content = "";
         } else {
           funcSource += `';`;
@@ -15002,19 +15002,19 @@ function compileToFunction(source, debug, file) {
           funcSource = funcSource.substring(0, funcSource.length - 4) + ";";
         }
         if (expr) {
-          funcSource += `$expr='<%${expr}%>';`;
+          funcSource += `$dbgExpr='<%${expr}%>';`;
         }
-        funcSource += content + `;$p+='`;
+        funcSource += content + `;$out+='`;
       }
     } else {
       if (operate === "@") {
         hasAtRule = true;
-        funcSource += `'+$i($$ref,${content})+'`;
+        funcSource += `'+$refFn($refAlt,${content})+'`;
       } else if (operate === "=" || operate === ":") {
-        funcSource += `'+$e(${content})+'`;
+        funcSource += `'+$encHtml(${content})+'`;
       } else if (operate === "!") {
-        if (!content.startsWith("$eu(") || !content.endsWith(")")) {
-          content = `$n(${content})`;
+        if (!content.startsWith("$encUri(") || !content.endsWith(")")) {
+          content = `$strSafe(${content})`;
         }
         funcSource += `'+${content}+'`;
       } else if (content) {
@@ -15022,28 +15022,24 @@ function compileToFunction(source, debug, file) {
         if (funcSource.endsWith(`+'';`)) {
           funcSource = funcSource.substring(0, funcSource.length - 4) + ";";
         }
-        funcSource += `${content};$p+='`;
+        funcSource += `${content};$out+='`;
       }
     }
     return match;
   });
   funcSource += `';`;
-  funcSource = funcSource.replace(/\$p\+='';/g, "");
-  funcSource = funcSource.replace(/\$p\+=''\+/g, "$p+=");
+  funcSource = funcSource.replace(/\$out\+='';/g, "");
+  funcSource = funcSource.replace(/\$out\+=''\+/g, "$out+=");
   if (debug) {
     const filePart = file ? `\\r\\n\\tat file:${file}` : "";
-    funcSource = `let $expr,$art,$line;try{${funcSource}}catch(ex){let msg='render view error:'+(ex.message||ex);if($art)msg+='\\r\\n\\tsrc art:{{'+$art+'}}\\r\\n\\tat line:'+$line;msg+='\\r\\n\\t'+($art?'translate to:':'expr:');msg+=$expr+'${filePart}';throw msg;}`;
+    funcSource = `let $dbgExpr,$dbgArt,$dbgLine;try{${funcSource}}catch(ex){let msg='render view error:'+(ex.message||ex);if($dbgArt)msg+='\\r\\n\\tsrc art:{{'+$dbgArt+'}}\\r\\n\\tat line:'+$dbgLine;msg+='\\r\\n\\t'+($dbgArt?'translate to:':'expr:');msg+=$dbgExpr+'${filePart}';throw msg;}`;
   }
   const viewIdRegExp = new RegExp(String.fromCharCode(31), "g");
   funcSource = funcSource.replace(viewIdRegExp, `'+$viewId+'`);
-  const atRule = hasAtRule ? `if(!$i){$i=(ref,v,k,f)=>{for(f=ref[$g];--f;)if(ref[k=$g+f]===v)return k;ref[k=$g+ref[$g]++]=v;return k;}}` : "";
-  const encode = `if(!$n){let $em={'&':'amp','<':'lt','>':'gt','"':'#34','\\'':'#39','\`':'#96'},$er=/[&<>"'\`]/g,$ef=m=>'&'+$em[m]+';';$n=v=>''+(v==null?'':v);$e=v=>$n(v).replace($er,$ef)}`;
-  const encodeURIMore = `if(!$eu){let $um={'!':'%21','\\'':'%27','(':'%28',')':'%29','*':'%2A'},$uf=m=>$um[m],$uq=/[!')(*]/g;$eu=v=>encodeURIComponent($n(v)).replace($uq,$uf)}`;
-  const encodeQuote = `if(!$eq){let $qr=/['"\\\\]/g;$eq=v=>$n(v).replace($qr,'\\\\$&')}`;
-  const refFallback = "if(!$$ref)$$ref=$$;";
-  const fns = `${refFallback}${encode}${encodeURIMore}${encodeQuote}${atRule};`;
-  const fullSource = `${fns}let $g='\\x1e',$_temp,$p=''{{VARS}};${funcSource}return $p`;
-  return `($$,$viewId,$$ref,$e,$n,$eu,$i,$eq)=>{${fullSource}}`;
+  void hasAtRule;
+  const refFallback = "if(!$refAlt)$refAlt=$data;";
+  const fullSource = `${refFallback}let $splitter='\\x1e',$tmp,$out=''{{VARS}};${funcSource}return $out`;
+  return `($data,$viewId,$refAlt,$encHtml,$strSafe,$encUri,$refFn,$encQuote)=>{${fullSource}}`;
 }
 function compileTemplate(source, options = {}) {
   const { debug = false, globalVars = [], file } = options;
@@ -15052,17 +15048,14 @@ function compileTemplate(source, options = {}) {
   const viewEventProcessed = processViewEvents(converted);
   const finalSource = restoreComments(viewEventProcessed, comments);
   const funcBody = compileToFunction(finalSource, debug, file);
-  const varDeclarations = globalVars.map((key) => `,${key}=$$.${key}`).join("");
+  const varDeclarations = globalVars.map((key) => `,${key}=$data.${key}`).join("");
   const funcWithVars = funcBody.replace("{{VARS}}", () => varDeclarations);
-  return `export default function(data, selfId, refData) {
-  let $$ = data || {},
-      $viewId = selfId || '';
-  return (${funcWithVars})($$, $viewId, refData,
-    /* $e */ v => String(v == null ? '' : v).replace(/[&<>"'\`]/g, m => '&' + ({'&':'amp','<':'lt','>':'gt','"':'#34',"'":'#39','\`':'#96'})[m] + ';'),
-    /* $n */ v => String(v == null ? '' : v),
-    /* $eu */ null,
-    /* $i */ null,
-    /* $eq */ null
+  return `import { encHtml as __larkEncHtml, strSafe as __larkStrSafe, encUri as __larkEncUri, encQuote as __larkEncQuote, refFn as __larkRefFn } from "@lark.js/mvc/runtime";
+export default function(data, viewId, refData) {
+  let $data = data || {},
+      $viewId = viewId || '';
+  return (${funcWithVars})($data, $viewId, refData,
+    __larkEncHtml, __larkStrSafe, __larkEncUri, __larkRefFn, __larkEncQuote
   );
 }`;
 }
@@ -15171,7 +15164,7 @@ function fallbackExtractVariables(source) {
   while ((m = outputRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
-  const eachRegExp = /\{\{each\s+([a-zA-Z_$][\w$]*)\s+as/g;
+  const eachRegExp = /\{\{forOf\s+([a-zA-Z_$][\w$]*)\s+as/g;
   while ((m = eachRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
@@ -15187,82 +15180,100 @@ function walkAst(ast, visitors) {
     if (visitors[type]) {
       visitors[type](node);
     }
+    const bag = node;
     for (const key of Object.keys(node)) {
       if (key === "type" || key === "start" || key === "end" || key === "loc" || key === "range")
         continue;
-      if (type === "MemberExpression" && key === "property" && !node.computed)
-        continue;
-      if (type === "ObjectProperty" && key === "key" && !node.computed) {
-        continue;
+      if (type === "MemberExpression" && key === "property") {
+        const me = node;
+        if (!me.computed) continue;
       }
-      if (type === "ObjectMethod" && key === "key" && !node.computed) {
-        continue;
+      if (type === "ObjectProperty" && key === "key") {
+        const op = node;
+        if (!op.computed) continue;
       }
-      const child = node[key];
+      if (type === "ObjectMethod" && key === "key") {
+        const om = node;
+        if (!om.computed) continue;
+      }
+      const child = bag[key];
       if (Array.isArray(child)) {
         for (const item of child) {
-          if (item && typeof item === "object" && typeof item.type === "string") {
-            visit(item);
-          }
+          if (isAstNode(item)) visit(item);
         }
-      } else if (child && typeof child === "object" && typeof child.type === "string") {
+      } else if (isAstNode(child)) {
         visit(child);
       }
     }
   }
   visit(ast);
 }
+function isAstNode(v) {
+  return !!v && typeof v === "object" && typeof v.type === "string";
+}
 var BUILTIN_GLOBALS = {
   // ─── Template runtime helpers (injected by compileToFunction) ───────
   //
   // These variables appear in the generated template function signature
   // or body. They must be excluded from extractGlobalVars() so that
-  // they are not mistaken for user data variables and destructured from $$.
+  // they are not mistaken for user data variables and destructured from $data.
   // SPLITTER character constant (same as \x1e), used as namespace separator
   // for refData keys, event attribute encoding, and internal data structures.
-  // Declared as: let $g='\x1e'
-  $g: 1,
-  // refData — the data object passed from Updater to the template function.
-  // User variables are destructured from $$ at the top of the function:
-  //   let {name, age} = $$;
+  // Declared as: let $splitter='\x1e'
+  $splitter: 1,
+  // Data — the data object passed from Updater to the template function.
+  // User variables are destructured from $data at the top of the function:
+  //   let {name, age} = $data;
   // This is the first parameter of the generated arrow function.
-  $$: 1,
+  $data: 1,
   // Null-safe toString: v => '' + (v == null ? '' : v)
   // Converts null/undefined to empty string, otherwise calls toString().
   // Wraps every {{!raw}} output to prevent "null" / "undefined" rendering.
-  $n: 1,
-  // HTML entity encoder: v => $n(v).replace(/[&<>"'`]/g, entityMap)
+  $strSafe: 1,
+  // HTML entity encoder: v => $strSafe(v).replace(/[&<>"'`]/g, entityMap)
   // Encodes &, <, >, ", ', ` to HTML entities (&amp; &lt; etc.)
   // Applied to all {{=escaped}} and {{:binding}} outputs.
-  $e: 1,
-  // HTML entity map — internal object used by $e:
+  $encHtml: 1,
+  // HTML entity map — internal object used by $encHtml:
   //   {'&':'amp','<':'gt','>':'gt','"':'#34','\'':'#39','`':'#96'}
-  // Not a standalone function; referenced inside $e's closure.
-  $em: 1,
-  // HTML entity RegExp — internal regexp used by $e:
+  // Not a standalone function; referenced inside $encHtml's closure.
+  $entMap: 1,
+  // HTML entity RegExp — internal regexp used by $encHtml:
   //   /[&<>"'`]/g
-  $er: 1,
-  // HTML entity replacer function — internal helper used by $e:
-  //   m => '&' + $em[m] + ';'
-  // Maps each matched character to its entity string.
-  $ef: 1,
+  $entReg: 1,
+  // HTML entity replacer function — internal helper used by $encHtml:
+  //   m => '&' + $entMap[m] + ';'
+  // Maps matched character to its entity string.
+  $entFn: 1,
   // Output buffer — the string accumulator for rendered HTML.
-  // All template output is appended via $p += '...'.
-  // Declared as: let $p = ''
-  $p: 1,
+  // All template output is appended via $out += '...'.
+  // Declared as: let $out = ''
+  $out: 1,
   // Reference lookup: (refData, value) => key
   // Finds or allocates a SPLITTER-prefixed key in refData for a given
   // object reference. Used by {{@ref}} operator for passing object
   // references to child views via v-lark attributes.
-  $i: 1,
-  // URI encoder: v => encodeURIComponent($n(v)).replace(/[!')(*]/g, extraMap)
+  $refFn: 1,
+  // URI encoder: v => encodeURIComponent($strSafe(v)).replace(/[!')(*]/g, extraMap)
   // Extends encodeURIComponent with encoding of ! ' ( ) *.
   // Applied to values in @event URL parameters and {{!uri}} contexts.
-  $eu: 1,
-  // Quote encoder: v => $n(v).replace(/['"\\]/g, '\\$&')
+  $encUri: 1,
+  // URI encode map — internal object used by $encUri:
+  //   {'!':'%21','\'':'%27','(':'%28',')':'%29','*':'%2A'}
+  $uriMap: 1,
+  // URI encode replacer — internal helper used by $encUri:
+  //   m => $uriMap[m]
+  $uriFn: 1,
+  // URI encode regexp — internal regexp used by $encUri:
+  //   /[!')(*]/g
+  $uriReg: 1,
+  // Quote encoder: v => $strSafe(v).replace(/['"\\]/g, '\\$&')
   // Escapes quotes and backslashes for safe embedding in HTML attribute
   // values (e.g. data-json='...').
-  $eq: 1,
+  $encQuote: 1,
+  // Quote encode regexp — internal regexp used by $encQuote:
+  //   /['"\\]/g
+  $qReg: 1,
   // View ID — the unique identifier of the owning View instance.
   // Injected into @event attribute values at render time so that
   // EventDelegator can dispatch events to the correct View handler.
@@ -15270,23 +15281,23 @@ var BUILTIN_GLOBALS = {
   $viewId: 1,
   // Debug: current expression text — stores the template expression being
   // evaluated, for error reporting. Only present in debug mode.
-  // e.g. $expr='<%=user.name%>'
-  $expr: 1,
+  // e.g. $dbgExpr='<%=user.name%>'
+  $dbgExpr: 1,
   // Debug: original art syntax — stores the {{}} template syntax before
   // conversion, for error reporting. Only present in debug mode.
-  // e.g. $art='{{=user.name}}'
-  $art: 1,
+  // e.g. $dbgArt='{{=user.name}}'
+  $dbgArt: 1,
   // Debug: source line number — tracks the current line in the template
   // source, for error reporting. Only present in debug mode.
-  $line: 1,
-  // refData alias — fallback reference lookup table.
-  // Defaults to $$ when no explicit $$ref is provided.
-  // Ensures $i() does not crash when @ operator is used without refData.
-  $$ref: 1,
+  $dbgLine: 1,
+  // RefData alias — fallback reference lookup table.
+  // Defaults to $data when no explicit $refAlt is provided.
+  // Ensures $refFn() does not crash when @ operator is used without refData.
+  $refAlt: 1,
   // Temporary variable — used by the compiler for intermediate
   // expression results in generated code (e.g. loop variables,
-  // conditional branches). Declared as: let $_temp
-  $_temp: 1,
+  // conditional branches). Declared as: let $tmp
+  $tmp: 1,
   // JS literals
   undefined: 1,
   null: 1,

package/dist/webpack.js

@@ -1,7 +1,7 @@
 import {
   compileTemplate,
   extractGlobalVars
-} from "./chunk-Y72BUONO.js";
+} from "./chunk-IIIY575B.js";
 
 // src/webpack.ts
 function larkMvcLoader(source) {

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@lark.js/mvc",
-  "version": "0.0.3",
-  "description": "Lark - TypeScript MVC framework",
+  "version": "0.0.5",
+  "description": "@lark.js/mvc - TypeScript MVC framework",
   "files": [
-    "dist"
+    "dist",
+    "src/client.d.ts",
+    "README.md"
   ],
   "exports": {
     ".": {
@@ -35,12 +37,23 @@
         "types": "./dist/webpack.d.cts",
         "default": "./dist/webpack.cjs"
       }
+    },
+    "./runtime": {
+      "import": {
+        "types": "./dist/runtime.d.ts",
+        "default": "./dist/runtime.js"
+      },
+      "require": {
+        "types": "./dist/runtime.d.cts",
+        "default": "./dist/runtime.cjs"
+      }
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
+    "prepublish": "pnpm build",
     "build": "pnpm build:tsup",
     "build:rollup": "rollup -c rollup.config.mjs",
     "build:tsup": "tsup",
@@ -60,16 +73,16 @@
   "license": "ISC",
   "packageManager": "pnpm@10.33.0",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@vitest/coverage-v8": "4.1.6",
-    "rollup": "^4.60.3",
+    "rollup": "^4.61.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsup": "^8.5.1",
-    "typescript": "^5.8.3",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.6"
+    "typescript": "^5.9.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "lint-staged": {
     "*.{json,jsonc,js,cjs,mjs,jsx,ts,cts,mts,tsx,html,vue,css,scss,md,mdx}": [

package/src/client.d.ts

@@ -0,0 +1,80 @@
+import type {
+  FrameInterface,
+  FrameworkInterface,
+  StateInterface,
+  RouterInterface,
+} from "./types";
+import type { Frame } from "./frame";
+import type { View } from "./view";
+declare global {
+  interface Window {
+    /** Whether lark debug mode is enabled */
+    __lark_Debug: boolean;
+    /** Lark Framework object */
+    __lark_Framework?: FrameworkInterface;
+    /** Lark State object */
+    __lark_State?: StateInterface;
+    /** Lark Router object */
+    __lark_Router?: RouterInterface;
+    /** Lark Frame class */
+    __lark_Frame?: typeof Frame;
+    /** Lark View class */
+    __lark_View?: typeof View;
+    /** Invalidate a view class from the registry (HMR support) */
+    __lark_invalidateViewClass?: (viewPath: string) => void;
+    /** Get the view class registry (HMR/debug support) */
+    __lark_getViewClassRegistry?: () => Record<string, typeof View>;
+    /** Register a view class (HMR support) */
+    __lark_registerViewClass?: (
+      viewPath: string,
+      ViewClass: typeof View,
+    ) => void;
+    /** Cross-site configuration injected by build tools */
+    crossConfigs?: CrossSiteConfig[];
+    scheduler?: Scheduler;
+  }
+  interface HTMLElement {
+    /** Bound frame instance */
+    frame?: FrameInterface | undefined;
+    /** Whether frame is bound to this element (1 = bound) */
+    frameBound?: number;
+    /** Whether auto-generated ID was assigned */
+    autoId?: number;
+    /** View rendered flag for selector matching */
+    viewRendered?: number;
+    /** Range frame ID for event delegation */
+    rangeFrameId?: string;
+    /** Range element guid for event delegation */
+    rangeElementGuid?: number;
+  }
+
+  interface Element {
+    /** VDOM diff cached compare key flag */
+    compareKeyCached?: number | undefined;
+    /** VDOM diff cached compare key */
+    cachedCompareKey?: string | undefined;
+    "v-lark"?: string | undefined;
+
+    // @lark.js/sentry
+    "s-lark-ev"?: string | undefined;
+    "s-lark-msg"?: string | undefined;
+  }
+}
+
+// CSS module type declarations
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+// HTML template module declarations (Lark templates - compiled to functions)
+declare module "*.html" {
+  // const template: (
+  //   data: unknown,
+  //   viewId: string,
+  //   refData: unknown,
+  // ) => string;
+  // export default template;
+  const content: string;
+  export default content;
+}