@teleporthq/teleport-project-generator-html 0.19.3 → 0.19.11

package/__tests__/end2end/index.ts

@@ -9,17 +9,23 @@ describe('Html Project Generator', () => {
 
   it('runs without crasing', async () => {
     const { name, files, subFolders } = await generator.generateProject(uidlSample, HTMLTemplate)
-    const pages = subFolders[0]?.subFolders.find((folder) => folder.name === 'pages')
-    const aboutPage = pages.files.find(
+    const aboutPage = subFolders[0]?.files.find(
       (page) => page.name === 'about' && page.fileType === FileType.HTML
     )
+    const homePage = subFolders[0]?.files.find(
+      (page) => page.name === 'landing-page' && page.fileType === FileType.HTML
+    )
+    const homeCSS = subFolders[0]?.files.find(
+      (page) => page.name === 'landing-page' && page.fileType === FileType.CSS
+    )
 
     expect(name).toBe('teleport-project-html')
     expect(files.length).toBe(1)
-    expect(files[0].content).toContain('start')
-    expect(subFolders.length).toBe(1)
+    expect(subFolders.length).toBe(2)
     expect(aboutPage.content).toContain('head')
     expect(aboutPage.content).toContain('html')
+    expect(homePage.content).toContain('public/playground_assets/kitten.png')
+    expect(homeCSS.content).toContain('public/playground_assets/kitten.png')
   })
 
   it('run withut crashing and appends entry things into single index.html', async () => {
@@ -28,16 +34,23 @@ describe('Html Project Generator', () => {
       uidlSample,
       HTMLTemplate
     )
-    const pages = subFolders[0]?.subFolders.find((folder) => folder.name === 'pages')
-    const aboutPage = pages.files.find(
+    const aboutPage = subFolders[0]?.files.find(
       (page) => page.name === 'about' && page.fileType === FileType.HTML
     )
+    const homePage = subFolders[0]?.files.find(
+      (page) => page.name === 'landing-page' && page.fileType === FileType.HTML
+    )
+    const homeCSS = subFolders[0]?.files.find(
+      (page) => page.name === 'landing-page' && page.fileType === FileType.CSS
+    )
 
     expect(name).toBe('teleport-project-html')
     expect(files.length).toBe(1)
     expect(subFolders.length).toBe(2)
     expect(aboutPage.content).not.toContain('head')
     expect(aboutPage.content).not.toContain('html')
+    expect(homePage.content).toContain('public/playground_assets/kitten.png')
+    expect(homeCSS.content).toContain('public/playground_assets/kitten.png')
   })
 
   it('throws error when invalid UIDL sample is used', async () => {

package/__tests__/index.ts

@@ -0,0 +1,144 @@
+import {
+  InMemoryFileRecord,
+  ProjectPluginStructure,
+  ProjectStrategy,
+  ProjectUIDL,
+  UIDLElementNode,
+  UIDLElementNodeInlineReferencedStyle,
+} from '@teleporthq/teleport-types'
+import { element, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { UIDLUtils } from '@teleporthq/teleport-shared'
+import ProjectTemplate from '../src/project-template'
+import { pluginImageResolver } from '../src/plugin-image-resolution'
+
+describe('Image Resolution project-plugin', () => {
+  const files = new Map<string, InMemoryFileRecord>()
+  it('resolves all local assets to be refered from public folder', async () => {
+    const projectUIDL: ProjectUIDL = {
+      name: 'teleport-html',
+      globals: {
+        settings: {
+          title: 'teleport-html',
+          language: 'en',
+        },
+        assets: [],
+        meta: [],
+      },
+      root: {
+        name: 'root',
+        styleSetDefinitions: {
+          bgImage: {
+            type: 'reusable-project-style-map',
+            content: {
+              backgroundImage: staticNode('url("/playground_assets/kitten.png")'),
+            },
+          },
+        },
+        node: {
+          type: 'element',
+          content: element('div', {}, [
+            elementNode('image', { src: staticNode('/playground_assets/kitten.png') }),
+            elementNode('div', {}, [], null, {
+              backgroundImage: staticNode('url("/playground_assets/kitten.png")'),
+            }),
+            {
+              type: 'element',
+              content: {
+                semanticType: 'Home',
+                ...element('component', { image: staticNode('/playground_assets/kitten.png') }),
+              },
+            },
+          ]),
+        },
+      },
+      components: {
+        Home: {
+          name: 'Home',
+          styleSetDefinitions: {
+            bgImageC: {
+              type: 'reusable-project-style-map',
+              content: {
+                backgroundImage: staticNode('url("/playground_assets/kitten.png")'),
+              },
+            },
+          },
+          propDefinitions: {
+            image: {
+              type: 'string',
+              defaultValue: '/playground_assets/kitten.png',
+            },
+          },
+          node: elementNode('div', {}, [], { type: 'local' }, {}, null, {
+            primaryButton: {
+              type: 'style-map',
+              content: {
+                mapType: 'inlined',
+                conditions: [{ maxWidth: 991, conditionType: 'screen-size' }],
+                styles: {
+                  backgroundImage: staticNode('url("/playground_assets/kitten.png")'),
+                },
+              },
+            },
+          }),
+        },
+      },
+    }
+
+    const structrue: ProjectPluginStructure = {
+      uidl: projectUIDL,
+      files,
+      dependencies: {},
+      template: ProjectTemplate,
+      strategy: {
+        id: 'teleport-project-html',
+        pages: {
+          path: ['src', 'pages'],
+        },
+        components: {
+          path: ['src', 'components'],
+        },
+        static: {
+          path: ['public'],
+        },
+      } as ProjectStrategy,
+      devDependencies: {},
+      rootFolder: UIDLUtils.cloneObject(ProjectTemplate),
+    }
+
+    const result = await pluginImageResolver.runBefore(structrue)
+    const { uidl } = result
+    const rootNode = uidl.root.node.content
+
+    /* Using assets on dom nodes like image tags */
+    expect((rootNode.children[0] as UIDLElementNode).content.attrs?.src?.content).toBe(
+      '../../public/playground_assets/kitten.png'
+    )
+    /* Using assets in style sheets */
+    expect((rootNode.children[1] as UIDLElementNode).content.style?.backgroundImage?.content).toBe(
+      'url("../../public/playground_assets/kitten.png")'
+    )
+    /* Using attrs while passing as a prop for a component call */
+    expect((rootNode.children[2] as UIDLElementNode).content.attrs.image?.content).toBe(
+      '../../public/playground_assets/kitten.png'
+    )
+    /* Using assets as defaultProp for component definition */
+    expect(uidl.components.Home.propDefinitions.image.defaultValue).toBe(
+      '../../public/playground_assets/kitten.png'
+    )
+    /* Using assets in global styleSetDefinitions */
+    expect(uidl.root.styleSetDefinitions.bgImage.content.backgroundImage.content).toBe(
+      'url("../../public/playground_assets/kitten.png")'
+    )
+    /* Using assets for component scoped styles */
+    expect(uidl.components.Home.styleSetDefinitions.bgImageC.content.backgroundImage.content).toBe(
+      'url("../../public/playground_assets/kitten.png")'
+    )
+    /* Using assets for media queries */
+    expect(
+      (
+        uidl.components.Home.node.content.referencedStyles
+          .primaryButton as UIDLElementNodeInlineReferencedStyle
+      ).content?.styles.backgroundImage.content
+    ).toBe('url("../../public/playground_assets/kitten.png")')
+  })
+})

package/dist/cjs/index.js

@@ -11,18 +11,19 @@ var teleport_plugin_css_1 = require("@teleporthq/teleport-plugin-css");
 var teleport_postprocessor_prettier_html_1 = __importDefault(require("@teleporthq/teleport-postprocessor-prettier-html"));
 var project_template_1 = __importDefault(require("./project-template"));
 exports.HTMLTemplate = project_template_1.default;
-var utils_1 = require("./utils");
+var plugin_clone_globals_1 = require("./plugin-clone-globals");
+var plugin_image_resolution_1 = require("./plugin-image-resolution");
 var createHTMLProjectGenerator = function (config) {
     var individualEntyFile = (config || { individualEntyFile: true }).individualEntyFile;
     var generator = teleport_project_generator_1.createProjectGenerator({
         id: 'teleport-project-html',
         components: {
             generator: teleport_component_generator_html_1.createHTMLComponentGenerator,
-            path: ['src', 'components'],
+            path: ['components'],
         },
         pages: {
             generator: teleport_component_generator_html_1.createHTMLComponentGenerator,
-            path: ['src', 'pages'],
+            path: [''],
         },
         static: {
             prefix: '',
@@ -32,7 +33,7 @@ var createHTMLProjectGenerator = function (config) {
             generator: teleport_component_generator_1.createComponentGenerator,
             plugins: [teleport_plugin_css_1.createStyleSheetPlugin()],
             fileName: 'style',
-            path: ['src'],
+            path: [''],
             importFile: true,
         },
         entry: {
@@ -41,8 +42,9 @@ var createHTMLProjectGenerator = function (config) {
             path: [''],
         },
     });
+    generator.addPlugin(plugin_image_resolution_1.pluginImageResolver);
     if (individualEntyFile) {
-        generator.addPlugin(utils_1.pluginHtmlGenerators);
+        generator.addPlugin(plugin_clone_globals_1.pluginCloneGlobals);
     }
     return generator;
 };

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,qFAA+E;AAC/E,mGAA4F;AAC5F,yFAAmF;AACnF,uEAAwE;AACxE,0HAA2E;AAC3E,wEAA6C;AAyCR,uBAzC9B,0BAAY,CAyC8B;AAxCjD,iCAA8C;AAE9C,IAAM,0BAA0B,GAAG,UAAC,MAAwC;IAClE,IAAA,kBAAkB,GAAK,CAAA,MAAM,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAA,mBAA3C,CAA2C;IAErE,IAAM,SAAS,GAAG,mDAAsB,CAAC;QACvC,EAAE,EAAE,uBAAuB;QAC3B,UAAU,EAAE;YACV,SAAS,EAAE,gEAA4B;YACvC,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC;SAC5B;QACD,KAAK,EAAE;YACL,SAAS,EAAE,gEAA4B;YACvC,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC;SACvB;QACD,MAAM,EAAE;YACN,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,CAAC,QAAQ,CAAC;SACjB;QACD,iBAAiB,EAAE;YACjB,SAAS,EAAE,uDAAwB;YACnC,OAAO,EAAE,CAAC,4CAAsB,EAAE,CAAC;YACnC,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,CAAC,KAAK,CAAC;YACb,UAAU,EAAE,IAAI;SACjB;QACD,KAAK,EAAE;YACL,cAAc,EAAE,CAAC,8CAAY,CAAC;YAC9B,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,CAAC,EAAE,CAAC;SACX;KACF,CAAC,CAAA;IAEF,IAAI,kBAAkB,EAAE;QACtB,SAAS,CAAC,SAAS,CAAC,4BAAoB,CAAC,CAAA;KAC1C;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAEQ,gEAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,qFAA+E;AAC/E,mGAA4F;AAC5F,yFAAmF;AACnF,uEAAwE;AACxE,0HAA2E;AAC3E,wEAA6C;AA2CR,uBA3C9B,0BAAY,CA2C8B;AA1CjD,+DAA2D;AAC3D,qEAA+D;AAE/D,IAAM,0BAA0B,GAAG,UAAC,MAAwC;IAClE,IAAA,kBAAkB,GAAK,CAAA,MAAM,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAA,mBAA3C,CAA2C;IAErE,IAAM,SAAS,GAAG,mDAAsB,CAAC;QACvC,EAAE,EAAE,uBAAuB;QAC3B,UAAU,EAAE;YACV,SAAS,EAAE,gEAA4B;YACvC,IAAI,EAAE,CAAC,YAAY,CAAC;SACrB;QACD,KAAK,EAAE;YACL,SAAS,EAAE,gEAA4B;YACvC,IAAI,EAAE,CAAC,EAAE,CAAC;SACX;QACD,MAAM,EAAE;YACN,MAAM,EAAE,EAAE;YACV,IAAI,EAAE,CAAC,QAAQ,CAAC;SACjB;QACD,iBAAiB,EAAE;YACjB,SAAS,EAAE,uDAAwB;YACnC,OAAO,EAAE,CAAC,4CAAsB,EAAE,CAAC;YACnC,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,CAAC,EAAE,CAAC;YACV,UAAU,EAAE,IAAI;SACjB;QACD,KAAK,EAAE;YACL,cAAc,EAAE,CAAC,8CAAY,CAAC;YAC9B,QAAQ,EAAE,OAAO;YACjB,IAAI,EAAE,CAAC,EAAE,CAAC;SACX;KACF,CAAC,CAAA;IAEF,SAAS,CAAC,SAAS,CAAC,6CAAmB,CAAC,CAAA;IACxC,IAAI,kBAAkB,EAAE;QACtB,SAAS,CAAC,SAAS,CAAC,yCAAkB,CAAC,CAAA;KACxC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAEQ,gEAA0B"}

package/dist/cjs/{utils.d.ts → plugin-clone-globals.d.ts}

@@ -1,7 +1,7 @@
 import { ProjectPlugin, ProjectPluginStructure } from '@teleporthq/teleport-types';
-declare class ProjectPluginHTMLGeneratprs implements ProjectPlugin {
+declare class ProjectPluginCloneGlobals implements ProjectPlugin {
     runBefore(structure: ProjectPluginStructure): Promise<ProjectPluginStructure>;
     runAfter(structure: ProjectPluginStructure): Promise<ProjectPluginStructure>;
 }
-export declare const pluginHtmlGenerators: Readonly<ProjectPluginHTMLGeneratprs>;
+export declare const pluginCloneGlobals: Readonly<ProjectPluginCloneGlobals>;
 export {};

package/dist/cjs/{utils.js → plugin-clone-globals.js}

@@ -39,47 +39,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pluginHtmlGenerators = void 0;
+exports.pluginCloneGlobals = void 0;
 var teleport_types_1 = require("@teleporthq/teleport-types");
 var node_html_parser_1 = require("node-html-parser");
 var teleport_postprocessor_prettier_html_1 = __importDefault(require("@teleporthq/teleport-postprocessor-prettier-html"));
-var ProjectPluginHTMLGeneratprs = /** @class */ (function () {
-    function ProjectPluginHTMLGeneratprs() {
+var ProjectPluginCloneGlobals = /** @class */ (function () {
+    function ProjectPluginCloneGlobals() {
     }
-    ProjectPluginHTMLGeneratprs.prototype.runBefore = function (structure) {
+    ProjectPluginCloneGlobals.prototype.runBefore = function (structure) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 return [2 /*return*/, structure];
             });
         });
     };
-    ProjectPluginHTMLGeneratprs.prototype.runAfter = function (structure) {
+    ProjectPluginCloneGlobals.prototype.runAfter = function (structure) {
         var _a;
         return __awaiter(this, void 0, void 0, function () {
-            var files, uidl, entryFile, result, body, head;
+            var files, uidl, entryFile, parsedEntryFile, body, head, scriptTags;
             return __generator(this, function (_b) {
                 files = structure.files, uidl = structure.uidl;
                 entryFile = files.get('entry');
                 if (!entryFile) {
                     return [2 /*return*/, structure];
                 }
-                result = node_html_parser_1.parse(entryFile.files[0].content);
-                body = result.querySelector('body');
+                parsedEntryFile = node_html_parser_1.parse(entryFile.files[0].content);
+                body = parsedEntryFile.querySelector('body');
+                head = parsedEntryFile.querySelector('head');
+                scriptTags = body.querySelectorAll('script');
                 body.childNodes = [];
                 if (Object.values(((_a = uidl.root) === null || _a === void 0 ? void 0 : _a.styleSetDefinitions) || {}).length > 0) {
-                    head = result.querySelector('head');
-                    head.appendChild(new node_html_parser_1.HTMLElement('link', {}, 'rel="stylesheet" href="../style.css"', result));
+                    head.appendChild(new node_html_parser_1.HTMLElement('link', {}, 'rel="stylesheet" href="./style.css"', parsedEntryFile));
                 }
                 files.forEach(function (fileId, key) {
                     var path = fileId.path;
-                    if (path.includes('pages')) {
+                    if (path[0] === '') {
                         var newFiles = fileId.files.map(function (file) {
-                            var _a;
-                            if (file.fileType === teleport_types_1.FileType.HTML) {
-                                body.innerHTML = file.content;
-                                var prettyFile = teleport_postprocessor_prettier_html_1.default((_a = {},
-                                    _a[teleport_types_1.FileType.HTML] = result.toString(),
-                                    _a));
+                            var _a, _b;
+                            if (file.fileType === teleport_types_1.FileType.HTML && file.name !== entryFile.files[0].name) {
+                                var parsedIndividualFile = node_html_parser_1.parse(file.content);
+                                var metaTags = parsedIndividualFile.getElementsByTagName('meta');
+                                var titleTags = parsedIndividualFile.getElementsByTagName('title');
+                                metaTags.forEach(function (metaTag) {
+                                    head.childNodes.unshift(metaTag);
+                                    metaTag.remove();
+                                });
+                                titleTags.forEach(function (titleTag) {
+                                    var inheritedHeadTags = head.getElementsByTagName('title');
+                                    if (inheritedHeadTags.length > 0) {
+                                        head.removeChild(head.getElementsByTagName('title')[0]);
+                                    }
+                                    head.childNodes.unshift(titleTag);
+                                    titleTag.remove();
+                                });
+                                body.appendChild(parsedIndividualFile);
+                                (_a = body.childNodes).push.apply(_a, scriptTags);
+                                var prettyFile = teleport_postprocessor_prettier_html_1.default((_b = {},
+                                    _b[teleport_types_1.FileType.HTML] = parsedEntryFile.toString(),
+                                    _b));
                                 return { name: file.name, content: prettyFile[teleport_types_1.FileType.HTML], fileType: teleport_types_1.FileType.HTML };
                             }
                             return file;
@@ -92,7 +109,7 @@ var ProjectPluginHTMLGeneratprs = /** @class */ (function () {
             });
         });
     };
-    return ProjectPluginHTMLGeneratprs;
+    return ProjectPluginCloneGlobals;
 }());
-exports.pluginHtmlGenerators = Object.freeze(new ProjectPluginHTMLGeneratprs());
-//# sourceMappingURL=utils.js.map
+exports.pluginCloneGlobals = Object.freeze(new ProjectPluginCloneGlobals());
+//# sourceMappingURL=plugin-clone-globals.js.map

package/dist/cjs/plugin-clone-globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-clone-globals.js","sourceRoot":"","sources":["../../src/plugin-clone-globals.ts"],"names":[],"mappings":"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"}

package/dist/cjs/plugin-image-resolution.d.ts

@@ -0,0 +1,11 @@
+import { ProjectPlugin, ProjectPluginStructure } from '@teleporthq/teleport-types';
+declare class ProjectPluginImageResolver implements ProjectPlugin {
+    private relativePath;
+    runBefore(structure: ProjectPluginStructure): Promise<ProjectPluginStructure>;
+    runAfter(structure: ProjectPluginStructure): Promise<ProjectPluginStructure>;
+    private resolvePropsAndStates;
+    private resolveFromStyles;
+    private imageResolver;
+}
+export declare const pluginImageResolver: ProjectPluginImageResolver;
+export {};

package/dist/cjs/plugin-image-resolution.js

@@ -0,0 +1,152 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pluginImageResolver = void 0;
+var teleport_shared_1 = require("@teleporthq/teleport-shared");
+var path_browserify_1 = __importDefault(require("path-browserify"));
+var parse = path_browserify_1.default.parse, join = path_browserify_1.default.join, relative = path_browserify_1.default.relative, isAbsolute = path_browserify_1.default.isAbsolute;
+var ProjectPluginImageResolver = /** @class */ (function () {
+    function ProjectPluginImageResolver() {
+        var _this = this;
+        this.resolvePropsAndStates = function (defs) {
+            Object.keys(defs || {}).forEach(function (propKey) {
+                var propValue = defs[propKey];
+                if (propValue.type === 'string' &&
+                    typeof (propValue === null || propValue === void 0 ? void 0 : propValue.defaultValue) === 'string' &&
+                    parse(propValue === null || propValue === void 0 ? void 0 : propValue.defaultValue).dir.startsWith('/')) {
+                    defs[propKey] = __assign(__assign({}, defs[propKey]), { defaultValue: join(_this.relativePath, propValue.defaultValue) });
+                }
+            });
+        };
+        this.resolveFromStyles = function (style) {
+            var _a, _b;
+            if (((_a = style === null || style === void 0 ? void 0 : style.backgroundImage) === null || _a === void 0 ? void 0 : _a.type) === 'static' &&
+                typeof ((_b = style === null || style === void 0 ? void 0 : style.backgroundImage) === null || _b === void 0 ? void 0 : _b.content) === 'string') {
+                var bgImage = style.backgroundImage.content;
+                if (bgImage.includes('http')) {
+                    return;
+                }
+                var regex = /(?:\(['"]?)(.*?)(?:['"]?\))/;
+                var matches = regex.exec(bgImage);
+                if (matches && (matches === null || matches === void 0 ? void 0 : matches.length) > 0 && isAbsolute(matches[1])) {
+                    style.backgroundImage.content = "url(\"" + join(_this.relativePath, matches[1]) + "\")";
+                }
+            }
+        };
+        this.imageResolver = function (element) {
+            var _a, _b;
+            _this.resolveFromStyles((element === null || element === void 0 ? void 0 : element.style) || {});
+            Object.values((element === null || element === void 0 ? void 0 : element.referencedStyles) || {}).forEach(function (styleRef) {
+                if (styleRef.content.mapType === 'inlined') {
+                    _this.resolveFromStyles(styleRef.content.styles);
+                }
+            });
+            if ((element === null || element === void 0 ? void 0 : element.elementType) === 'image' &&
+                ((_b = (_a = element.attrs) === null || _a === void 0 ? void 0 : _a.src) === null || _b === void 0 ? void 0 : _b.type) === 'static' &&
+                typeof element.attrs.src.content === 'string' &&
+                isAbsolute(element.attrs.src.content) &&
+                !element.attrs.src.content.startsWith('http')) {
+                element.attrs.src.content = join(_this.relativePath, element.attrs.src.content);
+            }
+            if (element.elementType === 'component') {
+                Object.keys((element === null || element === void 0 ? void 0 : element.attrs) || {}).forEach(function (attrKey) {
+                    var attrValue = element === null || element === void 0 ? void 0 : element.attrs[attrKey];
+                    if (attrValue.type === 'static' &&
+                        typeof attrValue.content === 'string' &&
+                        !attrValue.content.startsWith('http')) {
+                        var resolvedPath = parse(attrValue.content);
+                        if (resolvedPath.dir.startsWith('/')) {
+                            element.attrs[attrKey].content = join(_this.relativePath, attrValue.content);
+                        }
+                    }
+                });
+            }
+        };
+    }
+    ProjectPluginImageResolver.prototype.runBefore = function (structure) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var uidl, strategy, assetsPath, pagesPath;
+            var _this = this;
+            return __generator(this, function (_b) {
+                uidl = structure.uidl, strategy = structure.strategy;
+                assetsPath = join(strategy.id, strategy.static.path.join('/'));
+                pagesPath = join(strategy.id, strategy.pages.path.join('/'));
+                this.relativePath = relative(pagesPath, assetsPath);
+                teleport_shared_1.UIDLUtils.traverseElements(uidl.root.node, this.imageResolver);
+                Object.values(((_a = uidl === null || uidl === void 0 ? void 0 : uidl.root) === null || _a === void 0 ? void 0 : _a.styleSetDefinitions) || {}).forEach(function (styleSet) {
+                    _this.resolveFromStyles(styleSet.content);
+                });
+                this.relativePath = relative(join(strategy.id, strategy.components.path.join('/')), assetsPath);
+                Object.values(uidl.components || {}).forEach(function (component) {
+                    teleport_shared_1.UIDLUtils.traverseElements(component.node, _this.imageResolver);
+                    Object.values((component === null || component === void 0 ? void 0 : component.styleSetDefinitions) || {}).forEach(function (styleSet) {
+                        _this.resolveFromStyles(styleSet.content);
+                    });
+                    _this.resolvePropsAndStates(component.stateDefinitions);
+                    _this.resolvePropsAndStates(component.propDefinitions);
+                });
+                return [2 /*return*/, structure];
+            });
+        });
+    };
+    ProjectPluginImageResolver.prototype.runAfter = function (structure) {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, structure];
+            });
+        });
+    };
+    return ProjectPluginImageResolver;
+}());
+exports.pluginImageResolver = new ProjectPluginImageResolver();
+//# sourceMappingURL=plugin-image-resolution.js.map

package/dist/cjs/plugin-image-resolution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-image-resolution.js","sourceRoot":"","sources":["../../src/plugin-image-resolution.ts"],"names":[],"mappings":"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"}

package/dist/cjs/project-template.js

@@ -5,7 +5,7 @@ exports.default = {
     files: [
         {
             name: 'package',
-            content: "\n  {\n    \"name\": \"teleport-project-html\",\n    \"version\": \"1.0.0\",\n    \"private\": true,\n    \"dependencies\": {\n        \"parcel-bundler\": \"^1.6.1\"\n    },\n    \"scripts\": {\n        \"start\": \"parcel index.html --open\",\n        \"build\": \"parcel build index.html\"\n    }\n  }",
+            content: "\n  {\n    \"name\": \"teleport-project-html\",\n    \"version\": \"1.0.0\",\n    \"private\": true,\n    \"dependencies\": {\n        \"parcel-bundler\": \"^1.6.1\"\n    },\n    \"scripts\": {}\n  }",
             fileType: 'json',
         },
     ],

package/dist/cjs/project-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"project-template.js","sourceRoot":"","sources":["../../src/project-template.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,IAAI,EAAE,uBAAuB;IAC7B,KAAK,EAAE;QACL;YACE,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,iTAYX;YACE,QAAQ,EAAE,MAAM;SACjB;KACF;IACD,UAAU,EAAE,EAAE;CACf,CAAA"}
+{"version":3,"file":"project-template.js","sourceRoot":"","sources":["../../src/project-template.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,IAAI,EAAE,uBAAuB;IAC7B,KAAK,EAAE;QACL;YACE,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,yMASX;YACE,QAAQ,EAAE,MAAM;SACjB;KACF;IACD,UAAU,EAAE,EAAE;CACf,CAAA"}