Code Monkey home page Code Monkey logo

transform-parser's Introduction

Transform Parser

A small utility which converts css transform string to an object and vice versa.

Install

npm i transform-parser

# or

yarn add transform-parser

You can also addtransform-parser directly to your webpage and use it. The package will be available under window.transform.

<script src="https://unpkg.com/transform-parser"></script>

Usage

Like React, the default unit is px(pixel). When a number is passed as value, it will be suffixed with px and vice verse. Of course, the substitution will be skipped for transforms which requires numeral values, like scale3d().

import { parse, stringify } from 'transform-parser';
const transformString =
	'translate3d(10px, 40px, 24px) scale3d(1.1, 1.1, 1.1) perspective(20px)';

parse(transformString);
// => {translate3d: [10, 40, 24], scale3d(1.1, 1.1, 1.1), perspective: 20}

const transformObject = {
	rotate3d: [1, 2.0, 3.0, '10deg'],
	scale3d: [1.1, 1.1, 1.1],
	skewX: '30deg',
};

stringify(transformObject);
// => 'rotate3d(1, 2.0, 3.0, 10deg) scale3d(1.1, 1.1, 1.1) skewX(30deg)'

Local Development

yarn install
yarn build
yarn test

License

MIT

transform-parser's People

Contributors

praneshr avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

nickyonge

transform-parser's Issues

SyntaxError: Unexpected token 'export'

This fails when importing in a test (Jest) with:

import { parse } from 'transform-parser';

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\...\node_modules\transform-parser\index.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export interface TransformObject {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 20 | import { parse } from 'transform-parser';

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.