import-html-entry
Advanced tools
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
<!-- subApp/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!-- mark the entry script with entry attribute -->
<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js" entry></script>
<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>
</body>
</html>
import importHTML from 'import-html-entry';
importHTML('./subApp/index.html')
.then(res => {
console.log(res.template);
res.execScripts().then(exports => {
const mobx = exports;
const { observable } = mobx;
observable({
name: 'kuitos'
})
})
});
string - required, URL of the index HTML.ImportEntryOpts - optional, Load configuration.Promise<IImportResult>ImportEntryOpts
typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean } - optional, Custom fetch method.
utf-8(like gbk or gb2312), default is false.(entry: Entry) => string - optional, Customize the assets public path.(tpl: string) => string - optional, Customize the HTML template before proceeding.IImportResult
string - Processed HTML template.string - Public path for assets.Promise<string[]> - Scripts URL from template.Promise<string[]> - StyleSheets URL from template.(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise<unknown> - the return value is the last property on window or proxy window which set by the entry script.
sandbox.ExecScriptsHooks
(code: string, script: string) => string | void - optional, call it before executing each script, if return value is a string, replace code with return value.
(code: string, script: string) => void - optional, call it after executing each script, and the call will stop if the execution error occurs.
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
import importHTML from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => `${entry}/newPublicPath/`,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
importHTML('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});
Entry - required, URL of the index HTML or assets.ImportEntryOpts - optional, Load configuration.Promise<IImportResult>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.
Other type as same as importHTML.
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
import { importEntry } from 'import-html-entry';
const opts = {
fetch: {
fn: (...args) => window.fetch(...args),
autoDecodeResponse: true,
},
getPublicPath: (entry) => `${entry}/newPublicPath/`,
getTemplate: (tpl) => tpl.replace(/SOME_RULES/, '\n//Replaced\n'),
}
const entryOpts = {
styles: [
'https://unpkg.com/antd@3.13.6/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/react@16.4.2/umd/react.production.min.js'
],
html: `<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
</body>
</html>`
}
importEntry('./subApp/index.html')
.then(res => {
res.execScripts().then(exports => {
console.log(exports);
})
});
string - required, The URL of entry assets (will use last of scripts when entry is null).string[] - required, The URL for scripts (should always include entry when entry is valid URL).Window - required, Window or proxy window.ExecScriptsOpts - optional, Exec configuration.Promise<T> - The returned value is the last property on window or proxy window which set by the entry script.typeof window.fetch - optional, Custom fetch method.boolean - optional, Strictly enforce the sandbox.(exports: unknown) => void - optional, Use callback to get the result when successfully.
CallableFunction - optional, Use callback to get the result when error.Loads the scripts by URL on the custom sandbox, get the exports from entry script.
import { execScripts } from 'import-html-entry';
const scripts = [
'https://demo.com/entry.js',
'https://unpkg.com/react@16.4.2/umd/react.production.min.js'
]
execScripts(
'https://demo.com/entry.js',
scripts,
windows, // or custom sandbox
{
fetch: (...args) => window.fetch(...args),,
strictGlobal: true,
success: () => {},
error: () => {},
}
);
execScripts different from my expectation (e.g. {} / null / other values)?The 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.
To 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.
FAQs
import html and get the exports of entry
The npm package import-html-entry receives a total of 16,935 weekly downloads. As such, import-html-entry popularity was classified as popular.
We found that import-html-entry demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.