A simple way of loading inline es-modules on modern browser.

Overview

ES inline module

A simple way of loading inline es-modules on modern browser.

Usage

  1. 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>
  1. 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.

  1. 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

  1. 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>
You might also like...

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

Awesome-books A single page project with the porpuse of storing books' titles and authors. Built With CSS, HTML & Javascript. How to run in your local

Feb 21, 2022

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

Mar 31, 2022

A SPA (Single Page Application) that can track your books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

Awesome-Books-project Recreate awesome book app using ES6 syntax and modules. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link G

Jul 14, 2022

A SPW (Single Page Website) that can track your favorite books on your browser! Made with ES6 modules,JavaScript, HTML 5 and CSS 3.

A SPW (Single Page Website) that can track your favorite books on your browser! Made with  ES6 modules,JavaScript, HTML 5 and CSS 3.

awesome-books It is a project for Microverse's JavaScript Module to be done using pair-programming. Desktop Version Mobile Version In this website you

Aug 22, 2022

Leafjs is a lightweight frontend framework built using web components and browser ES Modules.

Leafjs A lightweight, fast web-components based frontend framework for the future. Introduction Leafjs is a lightweight frontend framework built using

Dec 23, 2022

Fallback JS - JavaScript library for dynamically loading CSS and JS files

Fallback JS - JavaScript library for dynamically loading CSS and JS files

Fallback JS - JavaScript library for dynamically loading CSS and JS files. Also provides the ability to load multiple files from a CDN with multiple fallback options and shimming!

Nov 13, 2022

Lightweight Loading Animation

Lightweight Loading Animation

◼️ Features: 🛠 Easy to Use 🌠 Fast & Lightweight (0.5Kb) 💪 No dependencies, built with VanillaJS 🌎 Tested in all modern browsers ◼️ Demo: https://b

Sep 1, 2022

Dynamically-loading WebComponent Assembly UI Framework

Golgi: Dynamically-loading WebComponent Assembly Framework Rob Tweed [email protected] 14 February 2022, M/Gateway Developments Ltd http://www.mgate

Dec 18, 2022

:loop: Create loopy loading animations

Sonic.js See some examples! Create your own with Sonic Creator! Sonic is a tool that you can use to create spinny-loady-thingies on the fly. It's best

Nov 21, 2022
Comments
Owner
稀土
掘金技术社区 https://juejin.cn
稀土
Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

loading="lazy" attribute polyfill Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements rig

Maximilian Franzke 571 Dec 30, 2022
A Simple yet extendable jQuery modal script built for use with inline HTML, images, videos, and galleries.

jQuery Chaos Modal A Simple yet extendable jQuery modal script built for use with inline HTML, forms, and images in mind. There are many other modal p

Matthew Sigley 3 Oct 8, 2020
A modern lazy loading library for images.

Layzr.js A modern lazy loading library for images. Demo Page Getting Started Follow these steps: Install Setup Images Instantiate Review Options Revie

Michael Cavalea 5.6k Dec 25, 2022
🦔 AstroJS GoogleChromeLabs critters integration. Inline your critical CSS with Astro.

astro-critters ?? This Astro integration brings critters to your Astro project. Critters is a plugin that inlines your app's critical CSS and lazy-loa

Nikola Hristov 33 Dec 11, 2022
A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

31 Dec 10, 2022
This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Karla Delgado 10 Aug 27, 2022
🎨 Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way 🚀 The best profile readme generator you will find ⚡

Demo Profile Readme Generator The best profile readme generator you will find! About | Technologies | Requirements | Starting | Contributing ?? About

Mauro de Souza 476 Jan 1, 2023
Simple and flexible, css only, content placeholder loading animation.

Placeholder loading Simple and flexible, css only, content placeholder loading animation. Demo https://zalog.github.io/placeholder-loading/ Take a loo

Catalin Zalog 1.4k Dec 30, 2022
Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist ?? ?? ?? ?? ?? The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Mikael Vesavuori 11 Dec 13, 2022