mithriljs / mopt Goto Github PK
View Code? Open in Web Editor NEWBabel plugin to optimize Mithril m() calls into simple JS objects for speed
License: MIT License
Babel plugin to optimize Mithril m() calls into simple JS objects for speed
License: MIT License
Hi tivac,
I had some issues running mithril-objectify via CLI in Windows.
First I had to install it globally via npm install -g mithril-objectify
to make it being recognized as command (is there another way to run it only locally inside the project?).
Then to make it work I had to change the mithril-objectify.cmd
content from:
"%~dp0\node_modules\mithril-objectify\bin\cli.js" %*
to
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\node_modules\mithril-objectify\bin\cli.js" %*
) ELSE (
node "%~dp0\node_modules\mithril-objectify\bin\cli.js" %*
)
Now it's working like a charm, I hope this could be useful.
Much like the just-added support for knowing that m.trust()
is optimizable we should know that m.component()
is optimizable as well. Not gonna get a ton of wins w/ that one, but should be pretty easy to add.
https://travis-ci.org/tivac/crucible/builds/163572082
Looks like the usage of require("babel-core")
is no good, probably need to get passed a babel instance and then pass it around or something annoying instead.
So #19 can finally die a real, proper death.
Create an empty file empty.js
$ browserify --version
5.11.0
$ browserify empty.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
},{}]},{},[1]);
$ browserify -t mithril-objectify empty.js
/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:1748
throw err;
^
SyntaxError: Invalid regular expression flag (1:1)
at Parser.pp.raise (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:1745:13)
at Parser.pp.readRegexp (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:3527:38)
at Parser.pp.readToken_slash (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:3318:28)
at Parser.pp.getTokenFromCode (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:3456:19)
at Parser.pp.readToken (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:3190:15)
at Parser.pp.nextToken (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:3182:71)
at parse (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/node_modules/acorn/dist/acorn.js:100:5)
at module.exports (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/node_modules/falafel/index.js:22:15)
at transform (/Users/sh/Work/tutory/webapp/node_modules/mithril-objectify/index.js:9:12)
at nr (/usr/local/lib/node_modules/browserify/node_modules/module-deps/index.js:230:23)
Would be neat to see stats output,
converted / total = % converted
for each file/thing being processed. Would need to be an option you can plumb through browserify/API/CLI.
I have the following component which works without mopt
enabled, but is broken with mopt
:
const NEWEST = 'Newest first';
const VOTES = 'Most votes';
const SortToggle = {
view({ attrs }) {
return (
m('.SortToggle',
m('.SortToggle-option', { onclick() { attrs.sortBy(NEWEST); } }, NEWEST),
m('.SortToggle-option', { onclick() { attrs.sortBy(MOST_VOTES); } }, MOST_VOTES)
)
);
}
};
It works fine using mopt
if I inline the string constants, like this:
const NEWEST = 'Newest first';
const VOTES = 'Most votes';
const SortToggle = {
view({ attrs }) {
return (
m('.SortToggle',
m('.SortToggle-option', { onclick() { attrs.sortBy(NEWEST); } }, 'Newest first'),
m('.SortToggle-option', { onclick() { attrs.sortBy(MOST_VOTES); } }, 'Most votes')
)
);
}
};
For some reason it only does the first one, which is less useful than it should be.
Community health files are stuff like CONTRIBUTING.md, FUNDING.yml, and so on, stuff that normally lives in .github
, docs/
, or the repo's root. I've added default files for everything on this list of supported file types except for a CONTRIBUTING.md file, as that process varies pretty greatly across repos. For issue templates, there's two templates: one for bugs and one for feature requests. The pull request template and issue templates are each derived from the core project's own core templates but with core-specific stuff omitted.
No action is required on your part, but you may wish to customize these appropriately and/or take other related action in light of this like adding/removing issue templates.
If you have any questions, comments, or concerns, please file an issue and I'd be more than willing to address them.
If we see a call like m("<selector>", [ ... ].map(...))
that should be convertable (since Array.prototype methods all return another array).
Hello, I noticed a weird behaviour in my app after running mopt, which seems to involve classes determined by ternary operators. Here's a quick example to reproduce the issue:
Source code:
const root = document.body;
const states = [true, false, null];
const state = states[Math.floor(Math.random() * states.length)];
m.render(root, m('span', {
className: state === true ? 'text-success' : state === false ? 'text-danger' : 'text-muted'
}, 'status'));
Transformed result:
var root = document.body;
var states = [true, false, null];
var state = states[Math.floor(Math.random() * states.length)];
m.render(root, m.vnode('span', undefined, undefined, undefined, 'status', undefined));
Version: 5.0.2
code:
m(
"p",
{
className: `mithril-Pager-page-arrow ${vnode.attrs.currentPage > 1 ? "" : "mithril-Pager-page-arrow--disabled"}`
},
"test"
)
In the output className
is not included.
For repo: https://github.com/gyandeeps/mithril-hn
File: https://github.com/gyandeeps/mithril-hn/blob/82879b862da659491d441837f9953f40337ed033/src/js/components/Pager.js
Notes:
className: "mithril-Pager-page-arrow " + (vnode.attrs.currentPage > 1 ? "" : "mithril-Pager-page-arrow--disabled")
Due to 7bc837f quoted properties like m(".fooga", { "booga" : true })
are being optimized out as:
{
tag : "div",
attrs : {
"class" : "fooga",
"undefined" : true
}
}
This is obviously incorrect.
I've run in a similar issue:
nwutils/nw-builder#75
I noticed that many files have Dos\Windows EOL while they should have UNIX EOL.
https://github.com/millermedeiros/rocambole
rocambole.moonwalk()
to traverse from leaves -> parent might allow us to find some extra optimizations since we'll have already transformed the children first.
m(".preview-container", loadingInfo.order.map(...))
should be optimized, but doesn't look like that's happening atm.
Hi Tivac.
Loved you module so far. Now as it requires babel to run not so much.
Would love allow to use it as plain browserify transform again.
I'm trying to use this as a browserify transform along with babelify but I'm running into some issues with ES6 imports.
This example works as expected:
const m = require('mithril')
const tags = m('.hello', m('a.world', {href: '#'}, 'Hello!'))
console.log(tags)
But transforms aren't applied for this example:
import m from 'mithril'
const tags = m('.hello', m('a.world', {href: '#'}, 'Hello!'))
console.log(tags)
To help automate a better changelog/commit messages across-the-board.
Is a reasonable example of a starting point.
m('div', {
'data-foo': 'bar'
}
generates
attrs: {
data-foo: 'bar'
}
Which breaks...
EDIT: in the meantime the workaround is to do something like
var a = {};
a['data-foo'] = 'bar';
m('div', a);
CallExpression[callee.name="m"]
looks promising.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.