import-html-entry-ssr
v1.14.0
Published
import html and get the exports of entry
Downloads
3
Readme
import-html-entry
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/[email protected]/lib/mobx.umd.js" entry></script>
<script src="https://unpkg.com/[email protected]/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'
})
})
});
API
importHTML(url, opts?)
Parameters
- url -
string
- required, URL of the index HTML. - opts -
ImportEntryOpts
- optional, Load configuration.
Return
Promise<IImportResult>
Type
ImportEntryOpts
- fetch -
typeof window.fetch | { fn?: typeof window.fetch, autoDecodeResponse?: boolean }
- optional, Custom fetch method.- autoDecodeResponse - optional, Auto decode when the charset is not
utf-8
(likegbk
orgb2312
), default isfalse
.
- autoDecodeResponse - optional, Auto decode when the charset is not
- getPublicPath -
(entry: Entry) => string
- optional, Customize the assets public path. - getTemplate -
(tpl: string) => string
- optional, Customize the HTML template before proceeding.
- fetch -
IImportResult
- template -
string
- Processed HTML template. - assetPublicPath -
string
- Public path for assets. - getExternalScripts -
Promise<string[]>
- Scripts URL from template. - getExternalStyleSheets -
Promise<string[]>
- StyleSheets URL from template. - execScripts -
(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise<unknown>
- the return value is the last property onwindow
orproxy window
which set by the entry script.- sandbox - optional, Window or proxy window.
- strictGlobal - optional, Strictly enforce the
sandbox
.
- template -
ExecScriptsHooks
- beforeExec -
(code: string, script: string) => string | void
- optional, call it before executing each script, ifreturn value
is a string, replacecode
withreturn value
.- code - The inline script as a string.
- script - The URL of external script.
- afterExec -
(code: string, script: string) => void
- optional, call it after executing each script, and the call will stop if the execution error occurs.- code - The inline script as a string.
- script - The URL of external script.
- beforeExec -
Usage
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
Sample
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);
})
});
importEntry(entry, opts?)
Parameters
- entry -
Entry
- required, URL of the index HTML or assets. - opts -
ImportEntryOpts
- optional, Load configuration.
Return
Promise<IImportResult>
Type
- 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.- styles - The URL for styles.
- scripts - The URL for scripts.
- html - The HTML template as a string, default is empty string.
Other type as same as importHTML.
Usage
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
Sample
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/[email protected]/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/[email protected]/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);
})
});
execScripts(entry, scripts, proxy, opts?)
Parameters
- entry -
string
- required, The URL of entry assets (will use last of scripts when entry is null). - scripts -
string[]
- required, The URL for scripts (should always include entry when entry is valid URL). - proxy -
Window
- required, Window or proxy window. - opts -
ExecScriptsOpts
- optional, Exec configuration.
Return
Promise<T>
- The returned value is the last property onwindow
orproxy window
which set by the entry script.
Type
- ExecScriptsOpts
- fetch -
typeof window.fetch
- optional, Custom fetch method. - strictGlobal -
boolean
- optional, Strictly enforce thesandbox
. - success -
(exports: unknown) => void
- optional, Use callback to get the result when successfully.- exports - Same as the return value.
- error -
CallableFunction
- optional, Use callback to get the result when error. - ExecScriptsHooks.
- fetch -
Usage
Loads the scripts by URL on the custom sandbox, get the exports from entry script.
Sample
import { execScripts } from 'import-html-entry';
const scripts = [
'https://demo.com/entry.js',
'https://unpkg.com/[email protected]/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: () => {},
}
);