❤
npm
Sign UpSign In

import-html-entry
TypeScript icon, indicating that this package has built-in type declarations

1.15.2 • Public • Published

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/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'
            })
        })
});

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(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<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 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
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/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);
        })
});

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 on window or proxy window which set by the entry script.
Type
  • ExecScriptsOpts
    • fetch - typeof window.fetch - optional, Custom fetch method.
    • strictGlobal - boolean - optional, Strictly enforce the sandbox.
    • 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.
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/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: () => {},
    }
);

FAQ

Why is the resolved value of 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.

Readme

Keywords

Package Sidebar

Install

npm i import-html-entry

Repository

github.com/kuitos/import-html-entry

Homepage

github.com/kuitos/import-html-entry#readme

Weekly Downloads

17,102

Version

1.15.2

License

MIT

Unpacked Size

74.7 kB

Total Files

10

Last publish

Collaborators

  • kuitos
Try on RunKit
Report malware