Re: [Pkg-javascript-devel] trying to build libjs-vue

2017-12-01 Thread Paolo Greppi 
Il 01/12/2017 06:55, Pirate Praveen ha scritto:
> On വെള്ളി 01 ഡിസംബര്‍ 2017 12:05 രാവിലെ, Paolo Greppi wrote:
>> According to this:
>> https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
>> we really should use rollup over webpack.
> 
> But we don't have rollup in main, we have been working on it for quite
> some time and it is going to take quite some more time before we can use
> it in main. webpack is almost there (packaging complete), except for the
> conflict with ftp masters on node-babel-preset-env.
> 
> See node-d3-zoom or node-d3-scale for example webpack configuration.

Good tip Praveen: webpack succeded in compiling vue.js !

I install node-babel-preset-env from local build, then:
apt install webpack node-babel-loader node-babel-plugin-add-module-exports

cat .babelrc 
{
  "presets": [
"es2015",
"flow-vue"],
  "plugins": [
"syntax-dynamic-import",
"babel-plugin-add-module-exports",
  ],
  "ignore": [
"dist/*.js",
"packages/**/*.js"
  ]
}
cat webpack.config.js
'use strict';
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var config = {
  target: 'web',
  entry: './src/platforms/web/entry-runtime-with-compiler.js',
  resolve: {
modules: ['/usr/lib/nodejs', './src', './src/platforms'],
  },
  resolveLoader: {
modules: ['/usr/lib/nodejs'],
  },
  output: {
path: path.resolve(__dirname, 'dist'),
filename: 'vue.js',
library: "Vue",
libraryTarget: 'umd',
umdNamedDefine: true
  },
  module: { rules: [ { use: [ 'babel-loader' ] } ] }
}
module.exports = config;
webpack --config webpack.config.js

I get frequent segmentation faults, probably the same as 
https://bugs.debian.org/878674
BTW, I can get rid of those with:
npm install webpack
(I then keep using the binary installed by the package, but the locally 
installed node
modules somehow cure the problem; I should probably report that to #878674 ...)

Anyway when ends I get a much larger "binary":
-rw-r--r-- 1 root root 468242 Dec  1 12:35 vue.js
and when I test that in a test application it works !

This is twice the size of the "binary" produced by upstream with rollup, but I 
still have
to experiment with dead code removal 
(https://webpack.js.org/guides/tree-shaking/#minify-the-output).

In any case we have to wait for node-babel-preset-env before I proceed with the 
RFS of this one.

Paolo

-- 
Pkg-javascript-devel mailing list
Pkg-javascript-devel@lists.alioth.debian.org
http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel

Re: [Pkg-javascript-devel] trying to build libjs-vue

2017-11-30 Thread Pirate Praveen 
On വെള്ളി 01 ഡിസംബര്‍ 2017 12:05 രാവിലെ, Paolo Greppi wrote:
> According to this:
> https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
> we really should use rollup over webpack.

But we don't have rollup in main, we have been working on it for quite
some time and it is going to take quite some more time before we can use
it in main. webpack is almost there (packaging complete), except for the
conflict with ftp masters on node-babel-preset-env.

See node-d3-zoom or node-d3-scale for example webpack configuration.

> Upstream uses rollup+buble and the build/config.js confuses me.
> So I gave rollup+babel a try, starting from scratch, here is my journey.
> 
> I picked:
> - node-he, node-rollup-plugin-commonjs and node-babel-plugin-external-helpers 
> from main, 
> - node-rollup-plugin-node-resolve from the NEW queue
> 
> Installed from npm:
> - rollup-plugin-babel (could be worth an ITP)
> - babel-preset-es2015-rollup
> the latter will not be necessary anymore with Babel>6.13, see 
> https://github.com/rollup/rollup-plugin-babel#configuring-babel
> 
> .babelrc:
> { "presets": ["es2015-rollup", "flow-vue"] }
> 
> rollup.config.js:
> import resolve from 'rollup-plugin-node-resolve';
> import babel from 'rollup-plugin-babel';
> export default {
>   entry: './src/platforms/web/entry-runtime-with-compiler.js',
>   moduleName: 'Vue',
>   plugins: [resolve(), babel({exclude: 'node_modules/**'})],
>   dest: { 'dist/vue.js' }
> };
> 
> then:
> rollup -c rollup.config.js -f umd
> 
> I get 2 times "[!] Error: A module cannot import itself" which I git rid with:
> diff --git a/src/platforms/web/compiler/directives/model.js 
> b/src/platforms/web/compiler/directives/model.js
> -import { genComponentModel, genAssignmentCode } from 
> 'compiler/directives/model'
> +import { genComponentModel, genAssignmentCode } from 
> '/compiler/directives/model'
> diff --git a/src/platforms/web/compiler/index.js 
> b/src/platforms/web/compiler/index.js
> -import { createCompiler } from 'compiler/index'
> +import { createCompiler } from '/compiler/index'
> 
> I am unsure about these fixes, it completes with warnings:
> (!) Unresolved dependencies
> https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
> web/util/element (imported by src/core/vdom/patch.js)
> /compiler/directives/model (imported by 
> src/platforms/web/compiler/directives/model.js)
> he (imported by src/compiler/parser/index.js)
> web/compiler/util (imported by src/compiler/parser/html-parser.js)
> /compiler/index (imported by src/platforms/web/compiler/index.js)
> (!) Unused external imports
> default imported from external module 'he' but never used
> isNonPhrasingTag imported from external module 'web/compiler/util' but never 
> used
> (!) Missing global variable names
> Use options.globals to specify browser global variable names corresponding to 
> external modules
> web/util/element (guessing 'web_util_element')
> /compiler/directives/model (guessing 
> '___compiler_directives_model')
> he (guessing 'he')
> web/compiler/util (guessing 'web_compiler_util')
> /compiler/index (guessing '___compiler_index')
> created dist/vue.js in 10.8s
> 
> and:
> ls -l dist
> -rw-r--r-- 1 root root 239866 Nov 30 19:26 vue.js
> ...

I guess you could ignore the warnings.

> Paolo
> 




signature.asc
Description: OpenPGP digital signature
-- 
Pkg-javascript-devel mailing list
Pkg-javascript-devel@lists.alioth.debian.org
http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel

Re: [Pkg-javascript-devel] trying to build libjs-vue

2017-11-30 Thread Paolo Greppi 
Il 30/11/2017 04:59, Pirate Praveen ha scritto:
> On 2017, നവംബർ 29 3:39:51 PM IST, Paolo Greppi  wrote:
>> Hi all, I an trying to build from vue.js sources, see:
>> ITP: https://bugs.debian.org/871459
>> repo: https://anonscm.debian.org/git/pkg-javascript/vue.js.git
>>
>> More precisely what is wanted is the browser (UMD) build, see:
>> https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
>>
>> To rebuild dist from source, upstream uses rollup (which is currently
>> stuck in contrib) plus a few rollup plugins we lack:
>> - rollup-plugin-buble
>> - rollup-plugin-alias
>> - rollup-plugin-node-resolve
>>
>> Therefore I attempted a hacky build avoiding rollup completely, and
>> using a combination of babeljs + browserify-lite.
>>
>> First I patched .babelrc as follows (apparently jsx can be used by vue
>> apps, but is not required for building vue itself):
>> -  "plugins": ["transform-vue-jsx", "syntax-dynamic-import"],
>> +  "plugins": ["syntax-dynamic-import"],
>>
>> then:
>> apt install node-browserify-lite node-babel-cli
>> node-babel-preset-es2015 node-babel-plugin-syntax-dynamic-import
>> node-babel-preset-flow-vue
>> babeljs src -d dist1
>> NODE_PATH=dist1 browserify-lite --standalone Vue ./dist1/core/index.js
>> --outfile dist/vue.js
>> uglifyjs -o dist/vue.min.js --source-map=dist/vue.min.js.map
>> dist/vue.js
>>
>> The resulting binaries are smaller/different than upstream
>> (https://github.com/vuejs/vue/tree/d4e0c3ef2444384719638a89f2a25af042b95795/dist):
>>
>> ls -l dist
>> ...
>> -rw-r--r-- 1 root root 165464 Nov 29 10:19 vue.js
>> -rw-r--r-- 1 root root 111528 Nov 29 10:19 vue.min.js
>> -rw-r--r-- 1 root root 106896 Nov 29 10:19 vue.min.js.map
>>
>> ls -l ../vue.js-2.5.9/dist
>> ...
>> -rw-r--r-- 1 paolog paolog 286869 nov 27 22:54 vue.common.js
>> -rw-r--r-- 1 paolog paolog 278610 nov 27 22:54 vue.esm.browser.js
>> -rw-r--r-- 1 paolog paolog 286852 nov 27 22:54 vue.esm.js
>> -rw-r--r-- 1 paolog paolog 284067 nov 27 22:54 vue.js
>> -rw-r--r-- 1 paolog paolog  86676 nov 27 22:54 vue.min.js
>> -rw-r--r-- 1 paolog paolog 208010 nov 27 22:54 vue.runtime.common.js
>> -rw-r--r-- 1 paolog paolog 207993 nov 27 22:54 vue.runtime.esm.js
>> -rw-r--r-- 1 paolog paolog 205957 nov 27 22:54 vue.runtime.js
>> -rw-r--r-- 1 paolog paolog  61382 nov 27 22:54 vue.runtime.min.js
>>
>> Testing them in a real-world application which works fine with upstream
>> dist files gives errors in the browser console:
>>
>> vue.js:1450 Uncaught ReferenceError: process is not defined
>>at Object.10.shared/util (vue.js:1450)
>>at req (vue.js:6)
>>at modRequire (vue.js:11)
>>at Object.4.../config (vue.js:273)
>>at req (vue.js:6)
>>at modRequire (vue.js:11)
>>at Object.1../init (vue.js:54)
>>at req (vue.js:6)
>>at modRequire (vue.js:11)
>>at Object.0../instance/index (vue.js:21)
>>
>> feeds.php:123 Uncaught ReferenceError: Vue is not defined
>>at feeds.php:123
>>
>> ...
>>
>> Has anybody here more clues than I have ?
> 
> Because browserify-lite will not handle nodejs api conversion. You can use 
> webpack (though one of its dependencies is still stuck in NEW and blocked by 
> https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=881339 it would be great if 
> more people can add their comments there).
> 
> You can enable contrib to get node-acorn-dynamic-import required for webpack.

According to this:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
we really should use rollup over webpack.

Upstream uses rollup+buble and the build/config.js confuses me.
So I gave rollup+babel a try, starting from scratch, here is my journey.

I picked:
- node-he, node-rollup-plugin-commonjs and node-babel-plugin-external-helpers 
from main, 
- node-rollup-plugin-node-resolve from the NEW queue

Installed from npm:
- rollup-plugin-babel (could be worth an ITP)
- babel-preset-es2015-rollup
the latter will not be necessary anymore with Babel>6.13, see 
https://github.com/rollup/rollup-plugin-babel#configuring-babel

.babelrc:
{ "presets": ["es2015-rollup", "flow-vue"] }

rollup.config.js:
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
export default {
  entry: './src/platforms/web/entry-runtime-with-compiler.js',
  moduleName: 'Vue',
  plugins: [resolve(), babel({exclude: 'node_modules/**'})],
  dest: { 'dist/vue.js' }
};

then:
rollup -c rollup.config.js -f umd

I get 2 times "[!] Error: A module cannot import itself" which I git rid with:
diff --git a/src/platforms/web/compiler/directives/model.js 
b/src/platforms/web/compiler/directives/model.js
-import { genComponentModel, genAssignmentCode } from 
'compiler/directives/model'
+import { genComponentModel, genAssignmentCode } from 
'/compiler/directives/model'
diff --git a/src/platforms/web/compiler/index.js 
b/src/platforms/web/compiler/index.js
-import { createCompiler } from 'compiler/index'
+import { createCompiler } from

Re: [Pkg-javascript-devel] trying to build libjs-vue

2017-11-29 Thread Pirate Praveen 


On 2017, നവംബർ 29 3:39:51 PM IST, Paolo Greppi  wrote:
>Hi all, I an trying to build from vue.js sources, see:
>ITP: https://bugs.debian.org/871459
>repo: https://anonscm.debian.org/git/pkg-javascript/vue.js.git
>
>More precisely what is wanted is the browser (UMD) build, see:
>https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
>
>To rebuild dist from source, upstream uses rollup (which is currently
>stuck in contrib) plus a few rollup plugins we lack:
>- rollup-plugin-buble
>- rollup-plugin-alias
>- rollup-plugin-node-resolve
>
>Therefore I attempted a hacky build avoiding rollup completely, and
>using a combination of babeljs + browserify-lite.
>
>First I patched .babelrc as follows (apparently jsx can be used by vue
>apps, but is not required for building vue itself):
>-  "plugins": ["transform-vue-jsx", "syntax-dynamic-import"],
>+  "plugins": ["syntax-dynamic-import"],
>
>then:
>apt install node-browserify-lite node-babel-cli
>node-babel-preset-es2015 node-babel-plugin-syntax-dynamic-import
>node-babel-preset-flow-vue
>babeljs src -d dist1
>NODE_PATH=dist1 browserify-lite --standalone Vue ./dist1/core/index.js
>--outfile dist/vue.js
>uglifyjs -o dist/vue.min.js --source-map=dist/vue.min.js.map
>dist/vue.js
>
>The resulting binaries are smaller/different than upstream
>(https://github.com/vuejs/vue/tree/d4e0c3ef2444384719638a89f2a25af042b95795/dist):
>
>ls -l dist
>...
>-rw-r--r-- 1 root root 165464 Nov 29 10:19 vue.js
>-rw-r--r-- 1 root root 111528 Nov 29 10:19 vue.min.js
>-rw-r--r-- 1 root root 106896 Nov 29 10:19 vue.min.js.map
>
>ls -l ../vue.js-2.5.9/dist
>...
>-rw-r--r-- 1 paolog paolog 286869 nov 27 22:54 vue.common.js
>-rw-r--r-- 1 paolog paolog 278610 nov 27 22:54 vue.esm.browser.js
>-rw-r--r-- 1 paolog paolog 286852 nov 27 22:54 vue.esm.js
>-rw-r--r-- 1 paolog paolog 284067 nov 27 22:54 vue.js
>-rw-r--r-- 1 paolog paolog  86676 nov 27 22:54 vue.min.js
>-rw-r--r-- 1 paolog paolog 208010 nov 27 22:54 vue.runtime.common.js
>-rw-r--r-- 1 paolog paolog 207993 nov 27 22:54 vue.runtime.esm.js
>-rw-r--r-- 1 paolog paolog 205957 nov 27 22:54 vue.runtime.js
>-rw-r--r-- 1 paolog paolog  61382 nov 27 22:54 vue.runtime.min.js
>
>Testing them in a real-world application which works fine with upstream
>dist files gives errors in the browser console:
>
>vue.js:1450 Uncaught ReferenceError: process is not defined
>at Object.10.shared/util (vue.js:1450)
>at req (vue.js:6)
>at modRequire (vue.js:11)
>at Object.4.../config (vue.js:273)
>at req (vue.js:6)
>at modRequire (vue.js:11)
>at Object.1../init (vue.js:54)
>at req (vue.js:6)
>at modRequire (vue.js:11)
>at Object.0../instance/index (vue.js:21)
>
>feeds.php:123 Uncaught ReferenceError: Vue is not defined
>at feeds.php:123
>
>...
>
>Has anybody here more clues than I have ?

Because browserify-lite will not handle nodejs api conversion. You can use 
webpack (though one of its dependencies is still stuck in NEW and blocked by 
https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=881339 it would be great if 
more people can add their comments there).

You can enable contrib to get node-acorn-dynamic-import required for webpack.

>Paolo

-- 
Sent from my Android device with K-9 Mail. Please excuse my brevity.

-- 
Pkg-javascript-devel mailing list
Pkg-javascript-devel@lists.alioth.debian.org
http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel

[Pkg-javascript-devel] trying to build libjs-vue

2017-11-29 Thread Paolo Greppi 
Hi all, I an trying to build from vue.js sources, see:
ITP: https://bugs.debian.org/871459
repo: https://anonscm.debian.org/git/pkg-javascript/vue.js.git

More precisely what is wanted is the browser (UMD) build, see:
https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

To rebuild dist from source, upstream uses rollup (which is currently stuck in 
contrib) plus a few rollup plugins we lack:
- rollup-plugin-buble
- rollup-plugin-alias
- rollup-plugin-node-resolve

Therefore I attempted a hacky build avoiding rollup completely, and using a 
combination of babeljs + browserify-lite.

First I patched .babelrc as follows (apparently jsx can be used by vue apps, 
but is not required for building vue itself):
-  "plugins": ["transform-vue-jsx", "syntax-dynamic-import"],
+  "plugins": ["syntax-dynamic-import"],

then:
apt install node-browserify-lite node-babel-cli node-babel-preset-es2015 
node-babel-plugin-syntax-dynamic-import node-babel-preset-flow-vue
babeljs src -d dist1
NODE_PATH=dist1 browserify-lite --standalone Vue ./dist1/core/index.js 
--outfile dist/vue.js
uglifyjs -o dist/vue.min.js --source-map=dist/vue.min.js.map dist/vue.js

The resulting binaries are smaller/different than upstream 
(https://github.com/vuejs/vue/tree/d4e0c3ef2444384719638a89f2a25af042b95795/dist):

ls -l dist
...
-rw-r--r-- 1 root root 165464 Nov 29 10:19 vue.js
-rw-r--r-- 1 root root 111528 Nov 29 10:19 vue.min.js
-rw-r--r-- 1 root root 106896 Nov 29 10:19 vue.min.js.map

ls -l ../vue.js-2.5.9/dist
...
-rw-r--r-- 1 paolog paolog 286869 nov 27 22:54 vue.common.js
-rw-r--r-- 1 paolog paolog 278610 nov 27 22:54 vue.esm.browser.js
-rw-r--r-- 1 paolog paolog 286852 nov 27 22:54 vue.esm.js
-rw-r--r-- 1 paolog paolog 284067 nov 27 22:54 vue.js
-rw-r--r-- 1 paolog paolog  86676 nov 27 22:54 vue.min.js
-rw-r--r-- 1 paolog paolog 208010 nov 27 22:54 vue.runtime.common.js
-rw-r--r-- 1 paolog paolog 207993 nov 27 22:54 vue.runtime.esm.js
-rw-r--r-- 1 paolog paolog 205957 nov 27 22:54 vue.runtime.js
-rw-r--r-- 1 paolog paolog  61382 nov 27 22:54 vue.runtime.min.js

Testing them in a real-world application which works fine with upstream dist 
files gives errors in the browser console:

vue.js:1450 Uncaught ReferenceError: process is not defined
at Object.10.shared/util (vue.js:1450)
at req (vue.js:6)
at modRequire (vue.js:11)
at Object.4.../config (vue.js:273)
at req (vue.js:6)
at modRequire (vue.js:11)
at Object.1../init (vue.js:54)
at req (vue.js:6)
at modRequire (vue.js:11)
at Object.0../instance/index (vue.js:21)

feeds.php:123 Uncaught ReferenceError: Vue is not defined
at feeds.php:123

...

Has anybody here more clues than I have ?

Paolo

-- 
Pkg-javascript-devel mailing list
Pkg-javascript-devel@lists.alioth.debian.org
http://lists.alioth.debian.org/cgi-bin/mailman/listinfo/pkg-javascript-devel