{"id":13491299,"url":"https://github.com/kuitos/import-html-entry","last_synced_at":"2025-05-14T13:03:15.195Z","repository":{"id":40633311,"uuid":"144278628","full_name":"kuitos/import-html-entry","owner":"kuitos","description":"import html and take over the exports from the scripts","archived":false,"fork":false,"pushed_at":"2024-06-17T03:39:17.000Z","size":375,"stargazers_count":809,"open_issues_count":2,"forks_count":173,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-05-05T15:08:55.747Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kuitos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-10T11:36:24.000Z","updated_at":"2025-04-30T01:12:37.000Z","dependencies_parsed_at":"2024-06-17T04:41:06.877Z","dependency_job_id":null,"html_url":"https://github.com/kuitos/import-html-entry","commit_stats":{"total_commits":230,"total_committers":23,"mean_commits":10.0,"dds":"0.12608695652173918","last_synced_commit":"175a5984ce04da4cd8f3b2b11dda6b475eb90e63"},"previous_names":[],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuitos%2Fimport-html-entry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuitos%2Fimport-html-entry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuitos%2Fimport-html-entry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kuitos%2Fimport-html-entry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kuitos","download_url":"https://codeload.github.com/kuitos/import-html-entry/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253001252,"owners_count":21838497,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:00:55.378Z","updated_at":"2025-05-14T13:03:15.161Z","avatar_url":"https://github.com/kuitos.png","language":"HTML","funding_links":[],"categories":["HTML","JavaScript","目录"],"sub_categories":[],"readme":"# import-html-entry\nTreats the index html as manifest and loads the assets(css,js), get the exports from entry script.\n\n```html\n\u003c!-- subApp/index.html --\u003e\n\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003etest\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c!-- mark the entry script with entry attribute --\u003e\n\u003cscript src=\"https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js\" entry\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react@16.4.2/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```js\nimport importHTML from 'import-html-entry';\n\nimportHTML('./subApp/index.html')\n    .then(res =\u003e {\n        console.log(res.template);\n\n        res.execScripts().then(exports =\u003e {\n            const mobx = exports;\n            const { observable } = mobx;\n            observable({\n                name: 'kuitos'\n            })\n        })\n});\n```\n\n## API\n\n  - [importHTML](#importhtmlurl-opts)\n  - [importEntry](#importentryentry-opts)\n  - [execScripts](#execscriptsentry-scripts-proxy-opts)\n\n\n#### importHTML(url, opts?)\n\n##### Parameters\n- url - `string` - required, URL of the index HTML.\n- opts - `ImportEntryOpts` - optional, Load configuration.\n\n##### Return\n- `Promise\u003cIImportResult\u003e`\n\n\n##### Type\n- ImportEntryOpts\n    - fetch - `typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean }` - optional, Custom fetch method.\n        - autoDecodeResponse - optional, Auto decode when the charset is not `utf-8`(like `gbk` or `gb2312`), default is `false`.\n    - getPublicPath - `(entry: Entry) =\u003e string` - optional, Customize the assets public path.\n    - getTemplate - `(tpl: string) =\u003e string` - optional, Customize the HTML template before proceeding.\n\n- IImportResult\n    - template - `string` - Processed HTML template.\n    - assetPublicPath - `string` - Public path for assets.\n    - getExternalScripts - `Promise\u003cstring[]\u003e` - Scripts URL from template.\n    - getExternalStyleSheets - `Promise\u003cstring[]\u003e` - StyleSheets URL from template.\n    - execScripts - `(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise\u003cunknown\u003e` - the return value is the last property on `window` or `proxy window` which set by the entry script.\n        - sandbox - optional, Window or proxy window.\n        - strictGlobal - optional, Strictly enforce the `sandbox`.\n\n- ExecScriptsHooks \u003cspan id=\"ExecScriptsHooks\" /\u003e\n    - beforeExec - `(code: string, script: string) =\u003e string | void` - optional, call it before executing each script, if `return value` is a string, replace `code` with `return value`.\n        - code - The inline script as a string.\n        - script - The URL of external script.\n    - afterExec - `(code: string, script: string) =\u003e void` - optional, call it after executing each script, and the call will stop if the execution error occurs.\n        - code - The inline script as a string.\n        - script - The URL of external script.\n\n##### Usage\nTreats the index html as manifest and loads the assets(css,js), get the exports from entry script.\n\n##### Sample\n```js\nimport importHTML from 'import-html-entry';\n\nconst opts = {\n    fetch: {\n        fn: (...args) =\u003e window.fetch(...args),\n        autoDecodeResponse: true,\n    },\n    getPublicPath: (entry) =\u003e `${entry}/newPublicPath/`,\n    getTemplate: (tpl) =\u003e tpl.replace(/SOME_RULES/, '\\n//Replaced\\n'),\n}\n\nimportHTML('./subApp/index.html')\n    .then(res =\u003e {\n        res.execScripts().then(exports =\u003e {\n            console.log(exports);\n        })\n});\n```\n\n\n#### importEntry(entry, opts?)\n\n##### Parameters\n- entry - `Entry` - required, URL of the index HTML or assets.\n- opts - `ImportEntryOpts` - optional, Load configuration.\n\n##### Return\n- `Promise\u003cIImportResult\u003e`\n\n##### Type\n- Entry - `string | { styles?: string[], scripts?: string[], html?: string }` - When type as string, importEntry will run as importHTML, otherwise will load scripts and add styleSheets in your HTML string which you're provided or not.\n    - styles - The URL for styles.\n    - scripts - The URL for scripts.\n    - html - The HTML template as a string, default is empty string.\n\n\u003e Other type as same as [importHTML](#importhtmlurl-opts).\n\n##### Usage\nLoads the assets(css,js) and embed into HTML template, get the exports from entry script.\n\n##### Sample\n```js\nimport { importEntry } from 'import-html-entry';\n\nconst opts = {\n    fetch: {\n        fn: (...args) =\u003e window.fetch(...args),\n        autoDecodeResponse: true,\n    },\n    getPublicPath: (entry) =\u003e `${entry}/newPublicPath/`,\n    getTemplate: (tpl) =\u003e tpl.replace(/SOME_RULES/, '\\n//Replaced\\n'),\n}\n\nconst entryOpts = {\n    styles: [\n        'https://unpkg.com/antd@3.13.6/dist/antd.min.css',\n    ],\n    scripts: [\n        'https://unpkg.com/react@16.4.2/umd/react.production.min.js'\n    ],\n    html: `\u003c!DOCTYPE html\u003e\n            \u003chead\u003e\n                \u003cmeta charset=\"UTF-8\"\u003e\n            \u003c/head\u003e\n            \u003cbody\u003e\n                \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n            \u003c/body\u003e\n        \u003c/html\u003e`\n}\n\nimportEntry('./subApp/index.html')\n    .then(res =\u003e {\n        res.execScripts().then(exports =\u003e {\n            console.log(exports);\n        })\n});\n```\n\n#### execScripts(entry, scripts, proxy, opts?)\n\n##### Parameters\n- entry - `string` - required, The URL of entry assets (will use last of scripts when entry is null).\n- scripts - `string[]` - required, The URL for scripts (should always include entry when entry is valid URL).\n- proxy - `Window` - required, Window or proxy window.\n- opts - `ExecScriptsOpts` - optional, Exec configuration.\n\n##### Return\n- `Promise\u003cT\u003e` - The returned value is the last property on `window` or `proxy window` which set by the entry script.\n\n##### Type\n- ExecScriptsOpts\n    - fetch - `typeof window.fetch` - optional, Custom fetch method.\n    - strictGlobal - `boolean` - optional, Strictly enforce the `sandbox`.\n\t- success - `(exports: unknown) =\u003e void` - optional, Use callback to get the result when successfully.\n        - exports - Same as the return value.\n\t- error - `CallableFunction` - optional, Use callback to get the result when error.\n    - [ExecScriptsHooks](#ExecScriptsHooks).\n\n##### Usage\nLoads the scripts by URL on the custom sandbox, get the exports from entry script.\n\n##### Sample\n```js\nimport { execScripts } from 'import-html-entry';\n\nconst scripts = [\n    'https://demo.com/entry.js',\n    'https://unpkg.com/react@16.4.2/umd/react.production.min.js'\n]\n\nexecScripts(\n    'https://demo.com/entry.js',\n    scripts,\n    windows, // or custom sandbox\n    {\n        fetch: (...args) =\u003e window.fetch(...args),,\n        strictGlobal: true,\n        success: () =\u003e {},\n        error: () =\u003e {},\n    }\n);\n```\n\n## FAQ\n\n### Why is the resolved value of `execScripts` different from my expectation (e.g. `{}` / `null` / other values)?\n\nThe `execScripts` will return the last property on `window` or `proxy window` which is set by the entry script. If the html entry has more than one script that is deferred, the resolved value of `execScripts` will be the value set by the last script, which may not be as expected.\n\nTo solve this problem, make sure the entry script is the last in the html entry. For example, if you are using `html-webpack-plugin`, you can set `scriptLoading: 'blocking'` in the plugin options.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuitos%2Fimport-html-entry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuitos%2Fimport-html-entry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuitos%2Fimport-html-entry/lists"}