Home

Awesome

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
Return
Type
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
Return
Type

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
Return
Type
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.