Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kuitos/import-html-entry
import html and take over the exports from the scripts
https://github.com/kuitos/import-html-entry
Last synced: 21 days ago
JSON representation
import html and take over the exports from the scripts
- Host: GitHub
- URL: https://github.com/kuitos/import-html-entry
- Owner: kuitos
- License: mit
- Created: 2018-08-10T11:36:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T03:39:17.000Z (5 months ago)
- Last Synced: 2024-10-12T16:59:18.099Z (22 days ago)
- Language: HTML
- Homepage:
- Size: 366 KB
- Stars: 773
- Watchers: 13
- Forks: 171
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-star-libs - kuitos / import-html-entry
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/[email protected]/dist/antd.min.css',
],
scripts: [
'https://unpkg.com/[email protected]/umd/react.production.min.js'
],
html: `