Skip to content

README.md

Latest commit

 

History

History
111 lines (80 loc) · 3.61 KB

README.md

File metadata and controls

111 lines (80 loc) · 3.61 KB

Solid ARIA

Solid Codemod

Codemod scripts for upgrading SolidJS APIs and code, powered by JSCodeshift.

Usage

npx solid-codemod <transforms> <paths> --write

  • transforms - transforms names
  • paths - directories or files to transform
  • --write or -w - write changes (it defaults to dry run)

NOTES:

  • It doesnt accept or use globs.
  • Many transforms or paths can be provided separated by spaces
  • When paths is not provided it runs tests on the selected transforms
  • Once its done it will display a green DONE
  • Transforms should modify code when "reliable possible"

Examples

  • solid-codemod - run all transforms internal tests.
  • solid-codemod solid@v2/jsx-properties-to-attributes - run internal tests for selected transform.
  • solid-codemod solid@v2/jsx-properties-to-attributes . - dry run transform on current directory.
  • solid-codemod solid@v2/jsx-properties-to-attributes . -w - run transform on current directory and write changes to files.

Codemod Transforms

solid@v2/jsx-properties-to-attributes

Used to update JSX properties vs attributes, from Solid 1.x to Solid 2.x.

  • CamelCase attributes to lowercase on known tags (not in components)
  • Unwrap attr: for known attributes
  • onsubmit="return false" -> attr:onsubmit="return false"
  • Ensure boolean attributes values (for static/conditional values)
  • Ensure pseudo-boolean attributes values (for static/conditional values)
  • Warn of unknown attributes

Warning: Do not use in already established Solid 2.x code as it assumes the code is Solid 1.x. For example false is a valid way to remove an attribute in Solid 2.x, while in Solid 1.x it means to have an attribute with that value.

solid@v2/jsx-classlist-to-class

Used to rename classList attribute to class https://docs.solidjs.com/concepts/components/class-style

solid@v2/jsx-array-map-to-for

Used to change array.map into the <For/> Solid component https://docs.solidjs.com/reference/components/for

Writing Transforms

  1. Look at the transforms folder, duplicate and edit a transform.
  2. Test your transform with solid-codemod solid@v2/your-transform-name
  3. Add the transform to the readme with a description
  4. May use src/transforms/shared.js for shared code

Helpers

Some shared code exits for helping author transforms.

  • src/transforms/shared.js - helpers for parsing and logging changes to console.
  • src/data - data helpers for specific Solid versions

Contributing

We're currently looking for transformations which SolidJS community is interested in. Please create a feature request or upvote/comment on existing feature requests which have the input and output code of the transformation you are looking for.

For example, here is a feature request to transform useState/useEffect of ReactJS to createSignal/onCleanup of SolidJS for your reference.

TODO

  • transfer npm to the solid project
  • figure out how to autopublish to npm

License

MIT