inline-module
v0.6.1
Published
Load inline es modules on modern browser.
Downloads
1,410
Readme
ES inline module
A simple way of loading inline es-modules on modern browser.
Usage
- Use
inlineImport
to dynamically import inline scripts.
<script type="inline-module" id="foo">
const foo = 'bar';
export default {foo};
</script>
<script src="https://unpkg.com/inline-module/index.js" setup="false"></script>
<script type="module">
const foo = (await inlineImport('#foo')).default;
console.log(foo); // {foo: 'bar'}
</script>
- Auto setup to insert importmap. Then you can use inline module as normal es-modules.
<script type="inline-module" id="foo">
const foo = 'bar';
export default {foo};
</script>
<script src="https://unpkg.com/inline-module/index.js"></script>
<script type="module">
import foo from '#foo';
console.log(foo); // {foo: 'bar'}
</script>
Note:inline-module script must be setup before all module scripts and after all inline-module scripts in this mode.
- Use setup and external importmap.
<script type="inline-module-importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="inline-module" id="foo">
const foo = 'bar';
export default foo;
</script>
<script src="https://unpkg.com/inline-module/index.js"></script>
<script type="module">
import foo from '#foo'
console.log(foo);
import {createApp} from 'vue';
console.log(createApp);
</script>
v0.4+ Update
- react & typescript loader
<script type="inline-module-importmap">
{
"imports": {
"styled-components": "https://unpkg.com/@esm-bundle/styled-components/esm/styled-components.browser.min.js"
}
}
</script>
<script type="inline-module" name="hello" loader="react">
import React from 'react';
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const name = 'Akira';
class Hello extends React.Component {
render() {
return (
<Title>
Hello~~ {name}
</Title>
);
}
}
export default Hello;
</script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/inline-module/dist/loaders.js"></script>
<script src="https://unpkg.com/inline-module/dist/core.js"></script>
<div id="app"></div>
<script type="module">
import Hello from 'hello';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(React.createElement(Hello), document.getElementById('app'));
</script>