/mechanic

Mechanic is a framework to build assets built on web code.

Primary LanguageJavaScriptMIT LicenseMIT

Mechanic Logo

Built with ❤️ by
logo



npm version Documentation PRs Welcome

Mechanic is a powerful design toolchain that helps forward-looking organizations move away from a manual design workflow by automating their design operations.

CURRENT STATUS: v1.2.0 is out now! Try it and tell us what you think! v2.0.0-beta.9 is also out and we're testing it! Feel free to test it out too!

Get Started

To start using right away and create a new Mechanic project, run the following:

npm init mechanic@latest

This will build a new base Mechanic project, with one design function! Follow the CLI instructions to customize, install and start running.

Mechanic App Screenshot

Documentation

Check out v1.2.0 documentation.

Monorepo Content

The repo is managed via lerna.

Repository Description
create-mechanic Mechanic project skeleton creator.
@mechanic-design/cli Command-line tool to generate new Mechanic projects, design functions and build app.
@mechanic-design/core Core Mechanic functionalities. Used by Mechanic's design tools and defines Mechanic class to be extended as Engines.
@mechanic-design/ui-components React component library intended to be used as inputs for design function inputs.
@mechanic-design/engine-canvas Engine function that extends base Mechanic class, intended to render static assets or animations built using the HTML Canvas API.
@mechanic-design/engine-p5 Engine function that extends base Mechanic class, intended to render static assets or animations built using p5.js.
@mechanic-design/engine-react Engine function that extends base Mechanic class, intended to render static assets or animations built using React components that renders SVG.
@mechanic-design/engine-svg Engine function that extends base Mechanic class, indended to render static assets or animations built using through SVG strings.
@mechanic-design/utils General purpose CLI definitions to be used by other Mechanic packages.
@mechanic-design/dsi-logo-maker A design tool project made with Mechanic to build assets and animations that follows DSI's identity logo.

Development

To get started, clone this repo.

Then run, npm run bootstrap. This will symlink all the dependencies together and run npm i inside each package. Running npm i inside a package folder will not work.

That should be enough to test certain individual package functionality, but to test mechanic projects with local package versions, we use yalc.

npm link falls short to reproduce package dependencies resolution as projects would by installing from the npm registry. yalc can locally publish packages as it would to the npm registry, to then use in local projects.

To do this, first install yalc globally. To publish all packages in the repo, run npm run publish:local. To publish an individual package, run yalc push from its directory or yalc push ./packages/[package]. Run any of these commands when you wish to update the published content.

Then in the project to test the package(s), before installing dependencies run yalc add [package] for all packages you wish to test. Then install normally with npm i.

For any other needs, check yalc's documentation.

Publish

Run npm run publish