Transform import statement

100%

Transform import statement

✓ Published0🌍 Public

Last edited Dec 9, 2016

Created on Dec 9, 2016

This example shows a code-modification workflow that rewrites JavaScript import statements by mapping component names to their file paths. It uses jscodeshift to parse source files into abstract syntax trees, filter import declarations from `components` or `component-library`, and replace them with direct path imports. The process generates path mappings from export declarations in index files, combines them into a single JSON dictionary, and then applies the transformation via the `transform-import.js` script, which leverages `jscodeshift`’s `ImportDeclaration` finder and `replaceWith` API. The run.sh script orchestrates the entire pipeline using npm scripts and Node.js file operations.

AI-generated description

UNLICENSED Licensed

Similar vizzes

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

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

58% match

Loading thumbnail…

Gist 526036a177c6d241f29073fad4622e19

This example demonstrates a Node.js module-alias configuration that maps the "~" import prefix to the project's dist directory. The code uses the `module-alias` library’s `addAliases` method alongside the `path` module’s `resolve` function to establish the path mapping. It shows how to set up convenient absolute imports in a TypeScript project, with the alias rooted at `../dist` from the current file’s location. No data visualization is present; the snippet is purely a build-time import utility.

TTipTopCoder

57% match

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

55% match

Loading thumbnail…

Gist c7d6ce69974576c130ef

This example converts Node.js V8 log files into symbolicated perf maps for generating flame graphs. The `convert.js` script parses code-creation events from the v8 log, extracting the instruction start address, length, type, and function name to produce entries in the format expected by Linux perf. The workflow uses `fs.readFileSync` and `split` to process the log, then pipes the output to a perf map file. The resulting visualization shows CPU sampling data from `perf record` as a flame graph, enabling performance analysis without upgrading Node.js.

Aalessioalex

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…

Converts Bulma CSS framework from SASS to SCSS

This example converts the Bulma CSS framework from SASS syntax to SCSS using a custom Gulp pipeline. It shows how `gulp.src` selects both root and nested `.sass` and `.scss` files from `node_modules/bulma`, then pipes them through the `sass-convert` converter with `from: 'sass'` and `to: 'scss'` options. The `gulp-replace` plugin rewrites any `.sass"` file-path references to `.scss"` in the source files, and a separate `gulp-sass` task compiles the converted `bulma.scss` to CSS. The gist demonstrates automating framework migration and recompilation with Node.js tooling.

LLucyI

54% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript can be imported and executed within an HTML document, with D3.js loaded via a CDN. The HTML file includes an empty body and a stylesheet, while the JavaScript imports `select` from D3 and logs it to the console, alongside a separate `script.js` that logs 'Hello'. A custom module `something.js` exports a string, showing ES module imports in action. The example highlights module structure and console output rather than visual rendering, using `d3.select` implicitly for demonstration.

JJavan Friedel

54% match