Gist e9ca6a4ec4fe6c3bee98

100%

Gist e9ca6a4ec4fe6c3bee98

✓ Published0🌍 Public

Last edited Mar 22, 2016

Created on Mar 22, 2016

This example shows how a JavaScript module with reserved-word property names—specifically `await`—triggers a parsing error during Rollup’s build pipeline, while the same names work in object literals. The code includes an `index.js` file defining an exported object with methods named `await` and `add`, and a `rollup.config.js` that applies the `rollup-plugin-babel` with the `es2015-rollup` preset via `.babelrc`. The visualization highlights the exact source-map error location from Rollup’s parser, contrasting valid syntax with the failing line. It uses Rollup’s plugin system and Babel’s preset configuration to demonstrate the issue.

AI-generated description

Similar vizzes

Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt

62% match

Loading thumbnail…

Test Rollup

This example demonstrates a minimal setup for integrating CoffeeScript with D3 v7 using Rollup. It shows how a Rollup configuration with the `rollup-plugin-coffee-script` plugin compiles a CoffeeScript entry file (`main.coffee`) that logs “Hello from Coffeescript” to the console. The page itself is an empty HTML body, with D3 loaded as a global library via the VizHub dependency configuration. The visualization is a functional test of tooling rather than a data-driven graphic, relying on Rollup’s build pipeline to process the script.

NNick Hogle

59% 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

57% match

Loading thumbnail…

The correct way to compile ES6 using babel...

This example shows how to configure Babel and Webpack to compile ES6 code into three separate module formats for different consumption contexts. It demonstrates three distinct build targets—Node.js unbundled, Node.js bundled, and browser bundled—each with its own Babel preset and package.json entry point. The code specifies `babel-preset-env` with environment-specific targets like `node: "6.10"` or `browsers: "last 2 versions, ie 10-11"`, and uses the `modules: false` option to enable tree shaking. The accompanying `package.json` and `webpack.config.js` files illustrate how to wire these build scripts together, with Webpack automatically selecting the appropriate entry point (`main`, `module`, or `browser`) based on the `target` setting.

66ewis

56% match

Loading thumbnail…

Native ES6 Modules Test

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.

CCurran Kelleher

56% match

Loading thumbnail…

Eloquent JS: Chapter 8

This example demonstrates JavaScript exception handling and control flow from Chapter 8 of Eloquent JavaScript, using a React starter template. The code implements `reliableMultiply`, which retries a `primitiveMultiply` function that randomly throws a custom `MultiplicatorUnitFailure` error, and `withBoxUnlocked`, which temporarily unlocks a box object, executes a body function, and restores the lock state in a `finally` block. The page renders static HTML with inline CSS and empty script tags, showing error-catching patterns without visual output.

Eemberix@gmail.com

55% match

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

54% match

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

AAlsaxian

54% match