npm provides modules

    @caedman/ts

    0.0.5 • Public • Published

    rollup mjs

    This configuration allows the creation of progressive applications (PWA) or design systems with Atomico, the project is managed thanks to Rollup.

    The default entry is index.html, you can create as many as you like, since rollup using the plugin @atomico/rollup-plugin-input-html, is capable of scanning HTML files and extracting local modules , to group them in a single MJS bunde associated with the HTML file independently, the dist directory is the destination of the code processed by rollup and it is the directory that you must send to production.

    Project assets such as images, svg or global styles must be added in the dist directory.

    Scripts

    npm run build # production mode
    npm run dev # development mode

    Export

    The extraction of the js code depends on rollup.config.js, you can create more HTML files, since the capture of these is by means of the expression *.html, this capture is only done when starting Rollup.

    Directory recommendation for application

    by default Atomico shows the following distribution to create applications.

    index.html
    /src
      # You can create HoCs or reusable ui that do not
      # need declaration as web-components
      /components
      # To create reusable logic between
      # components and web-components
      /hooks
        useCustomHook.js
      # You can create HoCs or reusable ui
      # that do not need declaration as WC
      /pages
      	/home
      		index.js
      		style.css
      # Components declared as web-components
      /web-components
        /hello-world
          index.js
          style.css

    Recommendation directory for design systems

    if you create independent HTML files you can export the components independently, for a light export in production, comment the plugins rollup-plugin-node-resolve inrollup.config.js, in this way Atomico will not be part of the bundle.

    ui-button.html # <script type="module" src="./src/web-component/ui-button">
    ui-header.html # <script type="module" src="./src/web-component/ui-header">
    /src
      /web-component
        /ui-button
          index.js
          style.css
        /ui-header
          index.js
          style.css

    The result of dist will be something like this:

    /dist
      ui-button.html
      ui-button.js
      ui-button.html
      ui-button.js
    

    You can consume this resource using unpkg, example http://unpkg.com/my-ui/dist/my-single-web-component?module,unpkg will automatically add Atomico as a resource of the package.

    Activation of PWA

    The file that comes by default index.html, has commented the following one taken. Remove the comnetario and this code and enable the service worker, this default is only updated when using npm run build.

    <!--Delete comment to activate PWA
    <script>
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("sw.js");
      }
    </script>
    -->

    remember to complete manifest.json and update previously generated icons

    Keywords

    none

    Install

    npm i @caedman/ts

    DownloadsWeekly Downloads

    4

    Version

    0.0.5

    License

    none

    Unpacked Size

    231 kB

    Total Files

    27

    Last publish

    Collaborators

    • caedman