# import-html-entry
**Repository Path**: reeser/import-html-entry
## Basic Information
- **Project Name**: import-html-entry
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-24
- **Last Updated**: 2024-02-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# import-html-entry
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
```html
test
```
```js
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](#importhtmlurl-opts)
- [importEntry](#importentryentry-opts)
- [execScripts](#execscriptsentry-scripts-proxy-opts)
#### importHTML(url, opts?)
##### Parameters
- url - `string` - required, URL of the index HTML.
- opts - `ImportEntryOpts` - optional, Load configuration.
##### Return
- `Promise`
##### 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`(like `gbk` or `gb2312`), default is `false`.
- getPublicPath - `(entry: Entry) => string` - optional, Customize the assets public path.
- getTemplate - `(tpl: string) => string` - optional, Customize the HTML template before proceeding.
- IImportResult
- template - `string` - Processed HTML template.
- assetPublicPath - `string` - Public path for assets.
- getExternalScripts - `Promise` - Scripts URL from template.
- getExternalStyleSheets - `Promise` - StyleSheets URL from template.
- execScripts - `(sandbox?: object, strictGlobal?: boolean, execScriptsHooks?: ExecScriptsHooks): Promise` - the return value is the last property on `window` or `proxy window` which set by the entry script.
- sandbox - optional, Window or proxy window.
- strictGlobal - optional, Strictly enforce the `sandbox`.
- ExecScriptsHooks
- beforeExec - `(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 - 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.
##### Usage
Treats the index html as manifest and loads the assets(css,js), get the exports from entry script.
##### Sample
```js
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`
##### 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](#importhtmlurl-opts).
##### Usage
Loads the assets(css,js) and embed into HTML template, get the exports from entry script.
##### Sample
```js
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: `