Native ES6 Modules Test

100%

Native ES6 Modules Test

✓ Published0🌍 Public

Last edited Aug 1, 2021

Created on Aug 1, 2021

This example tests native ES6 module support in browsers without a bundler. It imports a constant from `bar.js` and logs it using `console.log`, while also demonstrating an import map that aliases `./utils.mjs` to an inline data URL for a logging function. The code uses the native `type="module"` script tag and the browser’s import map API, with a React starter link for comparison.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

JS modules Learner

This example demonstrates the JavaScript module system for importing and exporting variables between files. It shows how to share constants (`aThing`, `someThing`) across script files and how to load D3’s `select` API. The page renders a static HTML message with an inline `<style>` rule for large centered text, then logs imported values and the D3 `select` object to the console. It uses `d3.v7` from a CDN and relies on the browser’s native ES module support.

KKamalabot

69% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

68% match

Loading thumbnail…

JS outside HTML

A minimal HTML page demonstrates the separation of JavaScript logic from markup by importing a constant from an external module and logging it to the console. The example uses D3’s `select` function to highlight how modern JavaScript modules can be combined with D3 in a plain HTML environment. The page loads D3 v7 via a CDN script tag, while the application code imports from `./something.js` using the `import` statement, showcasing a React-free workflow that still leverages D3’s utilities.

ММаксим Грязнов

67% match

Loading thumbnail…

Named and Default export

This example demonstrates the difference between named and default exports in ES6 JavaScript modules, showing how both can be imported together in a React context. The code defines `foo.js` with named exports `foo` and `bar`, plus a default export function, then imports them in `index.js` using mixed import syntax. It uses template literals to log the exported values and imports D3's `select` API to verify the library loads. The rendered page is a minimal HTML document with large centered text, displaying "Hello HTML" without any visualization or data rendering.

AAndrea Mignone

67% match

Loading thumbnail…

ES6 Import Maps

This example demonstrates how a web page can display large text entirely through an ES module import map, rendering the phrase "Import Maps" in the browser. Using a vanilla HTML structure, it defines an import map that aliases the package name `d3-selection` to a remote URL, then imports the `select` function from that package. The code applies the selection to the body element and sets its text content, showcasing the ability to use external libraries without a module bundler or build step.

CCurran Kelleher

67% match

Loading thumbnail…

test

This example demonstrates a minimal HTML page that loads a JavaScript module defining a set of Redux-style actions for managing a complex visualization state, including map navigation, polygon selection, and graph interactions. The page uses plain HTML and CSS to display a static greeting, while the script imports and logs the action registry generated from a list of action types. It illustrates how to structure a front-end application with a central action system, using symbols for action types and a proxy to catch undefined references. No visual rendering or data source is included beyond the console output.

YYann

66% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules and dependencies are handled within an HTML page, highlighting the contrast between traditional script tags and ES6 module imports. It shows the console output of a string concatenated from variables exported across separate files, including `GetRekt.js` and `lmfao.js`, using named exports. The code uses ES6 `import` and `export` statements, which are bundled by Vizhub’s internal Rollup process when the file is named `index.js`. It visualizes the concept of topological sorting for script dependencies, though the actual rendering is limited to a plain HTML text display.

JJaga-droid

64% match

Loading thumbnail…

JS in HTML

This example shows a minimal setup for using D3 within an HTML page with JavaScript modules. It demonstrates how to import functions from D3 and from a local module, logging both a custom string and the `select` function to the browser console. The code uses D3 v7 via a CDN link, React is referenced only in the README, and the visible behavior is limited to console output with no visualization rendered.

MMatthew Bruffey

64% match