Giter VIP home page Giter VIP logo

inline-module's Introduction

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>

inline-module's People

Contributors

advancedcat avatar akira-cn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

inline-module's Issues

同学,您这个项目引入了171个开源组件,存在1个漏洞,辛苦升级一下

检测到 xitu/inline-module 一共引入了171个开源组件,存在1个漏洞

漏洞标题:ansi-regex 安全漏洞
缺陷组件:[email protected]
漏洞编号:CVE-2021-3807
漏洞描述:Ansi-Regex是用于匹配ANSI 转义码的正则表达式。
ansi-regex 存在安全漏洞,该漏洞源于易受低效正则表达式复杂性的影响。
影响范围:(2.1.1, 5.0.1)
最小修复版本:5.0.1
缺陷组件引入路径:[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]>[email protected]
[email protected]>[email protected]>[email protected]>[email protected]>[email protected]

另外还有几个漏洞,详细报告:https://mofeisec.com/jr?p=i9c111

Maybe could remove '#' before module name for common import usage

I konw the first character ‘#’ in module name is to declare that module from a inline-module script with id attribute.
But I feel a little awkward when importing module with '#'. In my sense, 'foo' is module, not '#foo', like this:

import { bar } from 'foo'

In case of module conflict, maybe can store two names in importmap, one is 'foo', another is '#foo', unless has other better choices.

/\s*>\s*/

大佬,index.js这个文件的loaders = loaders.split(/\s*>\s*/); 这行,为啥这样写,是为了解决什么问题啊?求科普

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.