Git Product home page Git Product logo

shuji's Introduction

shuji (周氏)

Reverse engineering JavaScript and CSS sources from sourcemaps

Build Status Windows build status Node.js v20 CI codecov FOSSA Status

Background for the name

The name of the project is for honouring the legacy of a certain master from the Ryukyu archipelago who contributed to the martial arts that we today know as karate and ryukyu kobujutsu.

Getting started

Install the shuji command line utility globally with npm. Elevated privileges might be needed via sudo, depending on the platform. In most cases just:

npm install --global shuji

Usage example:

shuji file.js.map -o folder

Please note that the minimum supported version of Node.js is 14.15.0, which is the active Long Term Support (LTS) version.

Command line options

The output of shuji --help pretty much covers all the options:

shuji - Reverse engineering JavaScript and CSS sources from sourcemaps
Usage: shuji [options] <file|directory>

  -h, --help               Help and usage instructions
  -o, --output-dir String  Output directory - default: .
  -p, --preserve           Preserve sourcemap's original folder structure.
  -M, --match String       Regular expression for matching and filtering files -
                           default: \.map$
  -v, --verbose            Verbose output, will print which file is currently being
                           processed
  -V, --version            Version number

Version 0.8.0

Testing

Test files are generated with UglifyJS 3 and sass by using files from the stretchy project, with the following commands:

uglifyjs stretchy.js --compress --mangle \
 --output stretchy.min.js --source-map includeSources
mv stretchy.min.js.map stretchy-with-sources.min.js.map

uglifyjs stretchy.js --compress --mangle \
 --output stretchy.min.js --source-map "url=inline"
mv stretchy.min.js stretchy-inline-sources.min.js

uglifyjs stretchy.js --compress --mangle \
 --output stretchy.min.js --source-map "url=stretchy.min.js.map"

sass stretchy.scss:stretchy.css

sass stretchy.scss:stretchy-inline.css --embed-source-map

Unit tests are written with tape and can be executed with npm test. Code coverage is inspected with nyc and can be executed with npm run coverage after running npm test. Please make sure it is over 90% at all times.

Contributing

"A Beginner's Guide to Open Source: The Best Advice for Making your First Contribution".

Also there is a blog post about "45 Github Issues Dos and Don’ts".

Linting is done with ESLint and can be executed with npm run lint. There should be no errors appearing after any JavaScript file changes.

Please note that any features or changed will not be merged without working unit tests.

Version history

Changes happening across different versions and upcoming changes are tracked in the CHANGELOG.md file.

License

Copyright (c) Juga Paazmaya [email protected]

Licensed under the MIT license.

FOSSA Status

shuji's People

Contributors

fossabot avatar jerry9926 avatar paazmaya avatar renovate-bot avatar renovate[bot] avatar rodrigograca31 avatar snyk-bot avatar tjallingt avatar wankkoree avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shuji's Issues

how to use it 啊 give 啊

Expected behaviour

What it should have accomplished.

Actual behaviour

How to reproduce with minimal working example.

Versions and environment

  • Operating system:
  • Node.js:
  • npm:
  • shuji:

Thank you and have some 🍲.

How can I use --preserve options?

Expected behaviour

# shuji -h
shuji - Reverse engineering JavaScript and CSS sources from sourcemaps
Usage: shuji [options] <file|directory>

  -h, --help               Help and usage instructions
  -V, --version            Version number
  -v, --verbose            Verbose output, will print which file is currently being processed
  -o, --output-dir String  Output directory - default: .
  -M, --match String       Regular expression for matching and filtering files - default: \.map$

Version 0.7.0

Actual behaviour

I install shuji with npm install --global shuji command. But option --preserve is not present.

Versions and environment

  • Operating system:
  • Node.js: 18.2.0
  • npm: 6.7.0
  • shuji: 0.7.0

Thank you and have some 🍲.

增加文件目录

Expected behaviour

大佬,这个工具挺好用的。能把目录也还原出来不?像浏览器的调试工具一样

What it should have accomplished.

Actual behaviour

How to reproduce with minimal working example.

Versions and environment

  • Operating system:
  • Node.js:
  • npm:
  • shuji:

Thank you and have some 🍲.

Can you restore the src/components/ folder?

Can you restore the src/components/ folder?

The current command is Shuji -v app.52896ad8f3c5ea5bf029.js.map -o /mnt/ios/3.

There will be conflicts Warning: File /mnt/ios/3/index.vue already exists, skipping!

Want to achieve the following original catalogue

/src
components
router
views
App.vue
main.js

Partial reconstruction

Hello, this is a feature request. With Webpack, it is possible to generate bundled js files along with their sourcemaps without including the original source in the sourcemaps. But the mappings are still present, would it be possible to support a partial, best-effort reconstruction, to make the file more readable and beautified?

What bothers me when reading simple beautified files is the following syntax:

23487: function name {
...
}

I hope I have been clear enough... Any advice would be greatly appreciated!

You must provide the URL of lib/mappings.wasm by calling

Heeello everyone, I bumped into this problem when using shuji

Error info

➜ shuji .\bundle.js.map -o bundle.js.map.test
shuji - Reverse engineering JavaScript and CSS sources from sourcemaps
[path]\npm\node_modules\shuji\node_modules\source-map\lib\read-wasm.js:8
      throw new Error("You must provide the URL of lib/mappings.wasm by calling " +
            ^

using SourceMapConsumer
    at readWasm ([path]\npm\node_modules\shuji\node_modules\source-map\lib\read-wasm.js:8:13)
    at wasm ([path]\npm\node_modules\shuji\node_modules\source-map\lib\wasm.js:25:16)
    at [path]\npm\node_modules\shuji\node_modules\source-map\lib\source-map-consumer.js:264:14
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async readSources ([path]\npm\node_modules\shuji\lib\read-sources.js:24:20)
    at async handleInput ([path]\npm\node_modules\shuji\index.js:28:18)
    at async [path]\npm\node_modules\shuji\bin\shuji.js:151:23

Environment

win10
Node.js v18.12.1
[email protected]
npm 9.1.3

hava any solutions?😭

Support for webpackJsonp

Hello, it would be fantastic to have support for files in the form of

(window.webpackJsonp = window.webpackJsonp || []).push(/* ... */);

Any way of making this work, please? 🙏🏻

Support the --preserve option

Hi
First of all, thank you for this project, I feel it could help me re-building more efficient bundles, if I managed to have it work completely :)

Expected behaviour

Trying to have the files with the correct directory structure. The --preserve option is documented but fails

> npx shuji -v  --output-dir OUT_SHUJI $npm_package_config_map --preserve
Invalid option '--preserve' - perhaps you meant '--verbose'?

I checked the code, and indeed this option does not exist :)

Is there another way to have the original files in the original directory structure ?

thank you for your support

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/linting-and-unit-testing.yml
  • actions/checkout v4@a5ac7e51b41094c92402da3b24376905380afc29
  • actions/setup-node v4
npm
package.json
  • fs-extra 11.2.0
  • optionator 0.9.4
  • source-map 0.7.4
  • @babel/eslint-parser 7.24.6
  • codecov 3.8.3
  • eslint 8.57.0
  • eslint-config-paazmaya 9.0.1
  • eslint-plugin-n 14.0.0
  • c8 9.1.0
  • tape 5.7.5
  • node >=14.15.0
travis
.travis.yml
  • node 20

  • Check this box to trigger a request for Renovate to run again on this repository

True mastery

Thank you Sensei, that is a masterful piece of code, to dive into code! 🙏🏻

node error?

(node:6749) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): ReferenceError: WebAssembly is not defined
(node:6749) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Add How to use Instructions to readme

The README file isn't really verbose on how you can use shuji on the comman line, apart from the command line reference, it's pretty much a lot of guess work on the outside.

  • Should I reference the URL path directly?
  • Do I need the file in a local directory?
  • Absolute or relative path?
  • How do I handle multiple 'js.map` files in the same directory

Support inline sourcemaps

Expected behaviour

shuji bundle.js produce the same output as shuji bundle.js.map if bundle has an inline sourcemap. If it doesn't have a sourcemap it should throw an error.

Actual behaviour

shuji bundle.js will write shuji - Reverse engineering JavaScript and CSS sources from sourcemaps to the console and exit without erroring or generating files

Versions and environment

  • Operating system:
  • Node.js: v10.6.0
  • npm: 6.1.0
  • shuji: 0.4.0

Thank you and have some 🍲.

Create original directory structure

Firstly, Great job, Very useful tool. I just have one question which would make this tool the best thing since beer!

Is it possible to have this create the original directory structure as oppose to creating all the files in the current working directory?

For example, Once i run: shuji -v app.bundle.js.map

i get an sample file app.js

and that sample file contains this:

import React from 'react';
import Select from 'components/form/Select';

...
...
...

// WEBPACK FOOTER //
// ./app/webpack/react/components/Form/Form.js

Would it be possible to restore these files to the correct directory based on parsing the webpack footer text or using the import from?

Look forward to answer, Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.