EXAMPLES.md

Examples

Make google.com your interactive HTML playground

1. Go to google.com

2. Install use-m:

   const { use } = await import("https://esm.sh/use-m");

3. Use (import) d3:

   const d3 = await use('d3');

4. Clean page's body:

   document.body.innerHTML = '<svg></svg>';

5. Draw a curved arrow

   const svg = d3.select("svg")
     .attr("width", "100%")
     .attr("height", "100%")
     .attr("viewBox", "0 0 220 220");
   
   svg.append("defs").append("marker")
     .attr("id", "arrow")
     .attr("markerWidth", 20)
     .attr("markerHeight", 20)
     .attr("refX", 10)
     .attr("refY", 6)
     .attr("orient", "auto")
     .append("path")
     .attr("d", "M0,0 L0,12 L12,6 Z")
     .attr("fill", "white");
   
   svg.append("path")
     .attr("d", "M10,10 Q100,200 200,10")
     .attr("stroke", "white")
     .attr("fill", "none")
     .attr("marker-end", "url(#arrow)");

   

Activate IntelliSense in VS Code

1. Install use-m:

   yarn init
   yarn add use-m

   or

   npm init
   npm i use-m

2. Create a file named example.mjs

   import { use } from 'use-m';
   
   /** @type {import('lodash')} */
   const _ = await use('lodash@4.17.21');
   
   console.log(`_.add(1, 2) = ${_.add(1, 2)}`);

3. Type _. and see the list of available members of _.