thekashey / devolution

🦎 -> 🦖A de-evolution gun for your bundle!

List of all projects

State

• restate(7 packages) - fractal redux state
  • 📖 The State of the State
  • 📖 Redux Tree
• faste - finite state(event) machine.
  • 📖 FASTEn yor State
• immutable-changes - what was changed?
• react-gearbox - react-adopt+restate mixed together.
• react-push-channel - react context flowing backwards!
• with-known-usage - object keys usage tracker
• kashe - weakmap based reselect
  • 📖 Memoization forget-me-bomb

React

• react-hot-loader - I do RHL since version 3.
• react-locky - Reverse inert. A11y/behavior tool
  • 📖 How to train your scroll
• react-focus-lock - a focus management tool.
  • 📖 It's a (focus)Trap!
• beautiful-react-redux - a fixture for Redux
• why-did-you-update-redux - redux testing tool.
• react-memoize - react memoization framework (based on memoize-state).
  • 📖 getDerivedStateFromState
• react-svg-atlas - React SVG prerendering and isolation library
• react-stroller - react custom scroll bars made fast.
• react-scroll-locky - React body scroll locker made right.
  • 📖 How to fight the scroll
• react-remove-scroll - to remove scrollbars from the browser
• react-media-match - renderless media matcher
  • 📖 Adaptive?! Responsive? Reactive!
  • 📖 Take the Responsivebility
• react-reflexible - automatic visible text selection.
• react-power-timers - timers in renderless container form.
• react-queue - renderless task scheduler.
• recondition - renderless masks and triggers.
• react-clientside-effect - React 16 compatible client-side only fork of "react-side-channel.
• react-push-channel - a base bubbling data from the depths.
• react-shallow-context - shallowEqual for Context API.
• react-event-injector - to inject active or passive events into DOM
• use-sidecar - another way to code splitting
  • 📖 Sidecar for a code splitting
• use-callback-ref - advanced patterns for React.Ref management
  • 📖 The same useRef, but it will callback
  • 📖 Merging Refs

Code splitting

• react-imported-component - react async component with SSR support
  • 📖 React code splitting made easier
  • 📖 React-imported-component v6
• react-prerendered-component - enhanced SSR code splitting.
  • 📖 React Server Side Code Splitting Made.. Again
  • 📖 React SSR Caching
• webpack-imported - Webpack integration to React
• loadable-components - maintainer since 2020.

Node

• require-control - nodejs module resolution management tool.
• scan-directory - multi threaded directory scan.
• restructor - project structure guard.
• package-self - add your self as your package

Data sources

• 3166-2 DB - list of countries (3166).
• the-country-names - list of countries (3166).
• react-map-chart - Map of the world
• address-complete - autocomplete data provider
  • 📖 Address (auto)-complete
  • 📖 Choose your country, from a dropdown

Vue

• vue-focus-lock - a focus management tool.

DOM

• focus-lock - pure DOM focus management tool.
• dom-focus-lock - sugar
• aria-hidden - apply aria-hidden to all the nodes except

Util

• memoize-state - proxy-based magic memoization library.
  • 📖 How I wrote faster memoization library
• proxyequal - proxy based element comparison.
• search-trie - a simple trie
• plimited - connection pool in async form.

Mocking

• rewiremock - nodejs/webpack mocking tool
  • 📖 Unit Tests for SkyNet
  • 📖 Mocking was a code smell
  • 📖 Webpack, Mocha, Karma and mocking
  • 📖 Unit tests are production code
  • 📖 How to mock a dependecy
  • 📖 Please stop playing with proxyquire
• react-remock - react mocking library
  • 📖 Why I Always Use Shallow Rendering
• react-rename - react renaming library
• resolveQuire - functional wrapped around proxyquire
• proxyquire-webpack-alias - proxyquire 2 + webpack aliases
• function-double - function mocking
• jest-typed-mock - a __mocks__ type checking
• compare-module-exports - comparison tool

Styles

• styled-components-mixins - css-to-js mixings
  • 📖 CSS-to-JS
• postcss-to-js - css-to-js webpack loader
• css-to-js-loader - css-to-js webpack loader
• react-style-singleton - 0.5kb tool to ship static styles among library.

Optimizations

• runtime-compress-loader - a webpack loader to optimize sugar left by babel or tslib
• jsx-compress-loader - a webpack loader to speedup React.createElement usage
• devolution - bundler-independent es5/es2015 bundle transformation
  • 📖 DejaVu: Caching versus Memoization
• used-styles - css critical styles extraction

Stuff

• react-nyan-stroller - Nyan-cat custom scroll bar.
• react-backtrace - analitics breadcrumps

Rest

• wipeNodeCache - control over nodejs cache
• wipeWebpackCache - control over webpack cache
• hoist-react-statics - hoist-react-statics

Just articles

• 📖 A slip second later
• 📖 Optimizing CSS delivery
• 📖 Optimizing JS delivery
• 📖 How code splitting works
• 📖 When to codesplit, what and why
• 📖 Caching is not Memoization
• 📖 Require requirement testing
• 📖 Eat bear in parts Redux pattern
• 📖 Happy Potter and the Order of CSS
• 📖 Finite React Components
• 📖 SSR - Dependency mocking is the answer
• 📖 You probably need Redux
• 📖 immutable vs Immutable-js
• 📖 Unique IDs and where to find them
• 📖 I will split you into the pieces
• 📖 React Hot Loader Considered Harmful
• 📖 Hey! Async/await a minute
• 📖 Why React is better than Vue, and when
• 📖 Favor object composition over inheritance
• 📖 The Cake is a Lie!
• 📖 2 things about PureComponents you probably should know
• 📖 The way of HOC
• 📖 The Duck Tales

Habr articles (russian)

• 📖 Tell where are you, and I will tell where are you - converting Geo coordinates to the address
• 📖 Blocks, Suburbs... - creating a visual coverage for the administrative divisions.
• 📖 Kashey's death and where to find it - Adjacent Set, Materialized Path, Nested set, B-trees and space filling curves (I have to translate it!)
• 📖 W for Wikipedia - analyzing Wikipedia data from geometry point of view

devolution's Issues

how to install this tool?

the sunj
if i try to npm i devolution - it fails with:

ENOENT: no such file or directory, chmod '/.../node_modules/devolution/dist/cli.js'

Suggestion: a Webpack Plugin

I wonder if it would be possible to run this against Webpack's generated .assets (once webpack has generated the modern bundles) rather than actual files on disk? That would keep everything in-memory and also provide a convenient place to kick off devolution for those who are controlling everything else with Webpack already.

Edge v18 dynamic import issue

Apologies it may have nothing to do with the tool but I'm sure you will know what the issue is. I'm devoluting esm using targets

"edge": "16",
"firefox": "60",
"chrome": "61",
"safari": "10.1"

For es5 I target "ie11" only

IE11 (es5) works fine but Edge v18 (esm) does not.

I get a SCRIPT1002: Syntax error

The code that gets highlighted as problematic is...

import(n).then(t=>e(t)) (the debugger highlights "(n)" to be precise)

Latest Edge works fine. I'm struggling to work out what the issue is so any insight would be really appreciated. It seems to be related to dynamic imports. It seems the older version of Edge (which you get when installing windows 10 v1802) understands <script type="module"> but does not understand dynamic imports? So do I need to polyfill dynamic imports myself? If so I'm not quite understanding what devolution is doing for me? Should it not supply this polyfill?

Output below which polyfills applied for esm...

║ esm │ 381051 │ +60903 │ 42 │ es.symbol.description,es.string.replace,es.array.index-of, ║
║ │ │ │ │ es.array.slice,es.regexp.constructor,es.regexp.to-string, ║
║ │ │ │ │ esnext.map.delete-all,esnext.map.every,esnext.map.filter, ║
║ │ │ │ │ esnext.map.find,esnext.map.find-key,esnext.map.includes, ║
║ │ │ │ │ esnext.map.key-of,esnext.map.map-keys,esnext.map.map-values, ║
║ │ │ │ │ esnext.map.merge,esnext.map.reduce,esnext.map.some,esnext. ║
║ │ │ │ │ map.update,es.array.iterator,web.dom-collections.iterator, ║
║ │ │ │ │ es.array.reduce-right,esnext.weak-map.delete-all,es.string. ║
║ │ │ │ │ trim,es.array.splice,es.object.assign,es.string.includes,es. ║
║ │ │ │ │ string.split,es.array.sort,es.promise,es.string.search,es. ║
║ │ │ │ │ object.from-entries,es.string.match,web.url,es.array.reduce, ║
║ │ │ │ │ es.array-buffer.constructor,es.array-buffer.slice,es.array. ║
║ │ │ │ │ last-index-of,es.string.starts-with,es.string.ends-with,web. ║
║ │ │ │ │ url.to-json,es.promise.finally ║

Many thanks in advance

Should handle nested directories

js files could be hidden inside nested directories, and devolution should be able to handle them. However it's not clear how.
Probably - throw if they needed some transformation, or it will broke the aliasing part.

Subresource Integrity

Subresource Integrity would be broken after devolution and should be recalculated.

es5 target broken if I remove target esm from the .devolutionrc.js file

Hello, basically I only wanted es5 output, so I removed the esm target from the .devolutionrc.js file. This produced ES5 code that would not load in IE11. As soon as I put back the esm target back in the code generated under the es5 directory works fine?

Very strange, no idea why, just thought I would report it in case some one hits this issue. Maybe the esm target always has to be there?

Great tool by the way! So far so good!

In order to use `addPolyfills` define `rootBundles` condition

Hello,

When I run the command 'yarn run devolution dist es5", I get this error
Error: devolution: in order to useaddPolyfillsdefinerootBundles condition.

I don't really know what to put inside 'rootBundles',

Thank you

addPolyfills does not seem to do anything

Part of my .devolutionrc file

addPolyfills: {
esm: [
// probably none?
],
es5: [
'proxy-polyfill',
]
},

It does not add the polyfill? It does exist in package.json etc.

Currently I have to include it in my code to get things to work but I don't want to include it for target ESM ? What am I missing?

SWC produces broken code

Some optimizations are unsafe, falling back to babel while it's not fixed.