From 490f42d5281197525462e7797f32d41ce1b6296c Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Tue, 27 Dec 2016 18:25:16 -0700 Subject: [PATCH] Avoid extra assignment for default export --- Makefile | 6 +----- package/package.json | 4 ++-- package/readme.md | 29 ++++++++++++++++++------- tasks/generate-defines.js | 31 --------------------------- transforms/module.js | 45 ++++++++++++++++++++++++++++++--------- 5 files changed, 59 insertions(+), 56 deletions(-) delete mode 100644 tasks/generate-defines.js diff --git a/Makefile b/Makefile index 730b781666..d6742d2187 100644 --- a/Makefile +++ b/Makefile @@ -302,13 +302,9 @@ build/test_rendering_requires.js: $(SPEC_RENDERING_JS) %shader.js: %shader.glsl src/ol/webgl/shader.mustache bin/pyglslunit.py build/timestamps/node-modules-timestamp @python bin/pyglslunit.py --input $< | ./node_modules/.bin/mustache - src/ol/webgl/shader.mustache > $@ -build/defines.json: src/ol/index.js build/timestamps/node-modules-timestamp - @node tasks/generate-defines.js - .PHONY: package -package: build/defines.json +package: @rm -rf build/package - @node tasks/generate-defines.js @cp -r package build @cd ./src && cp -r ol/* ../build/package @rm build/package/typedefs.js diff --git a/package/package.json b/package/package.json index db40fddf01..68bce09451 100644 --- a/package/package.json +++ b/package/package.json @@ -1,7 +1,7 @@ { "name": "ol", - "version": "3.21.0-beta.10", - "description": "OpenLayers", + "version": "3.21.0-beta.16", + "description": "OpenLayers as ES2015 modules", "main": "index.js", "module": "index.js", "license": "BSD-2-Clause", diff --git a/package/readme.md b/package/readme.md index d141397e76..0305a2f391 100644 --- a/package/readme.md +++ b/package/readme.md @@ -1,6 +1,6 @@ -# `ol` +# ol -[OpenLayers](https://openlayers.org/) for module loaders. +OpenLayers as ES2015 modules. **Note: This is still a work in progress. Not yet ready for production.** @@ -13,16 +13,18 @@ Add the `ol` package as a dependency to your project. Import just what you need for your application: ```js -import Map from 'ol/Map'; -import View from 'ol/View'; -import TileLayer from 'ol/layer/Tile'; -import OSM from 'ol/source/OSM'; +import Map from 'ol/map'; +import View from 'ol/view'; +import TileLayer from 'ol/layer/tile'; +import XYZ from 'ol/source/xyz'; -var map = new Map({ +new Map({ target: 'map', layers: [ new TileLayer({ - source: new OSM() + source: new XYZ({ + url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' + }) }) ], view: new View({ @@ -31,3 +33,14 @@ var map = new Map({ }) }); ``` + +Note that the module identifiers above (e.g. `ol/map`) are like the `ol.Map` names in the [API documentation](http://openlayers.org/en/latest/apidoc/) with `/` instead of `.` and all lowercase. + +See the following examples for more detail on bundling OpenLayers with your application: + + * Using [Rollup & Uglify](https://gist.github.com/tschaub/8beb328ea72b36446fc2198d008287de) + * Using [Rollup & Closure Compiler](https://gist.github.com/tschaub/32a5692bedac5254da24fa3b12072f35) + * Using [Webpack & Uglify](https://gist.github.com/tschaub/79025aef325cd2837364400a105405b8) + * Using [Browserify & Uglify](https://gist.github.com/tschaub/4bfb209a8f809823f1495b2e4436018e) + +This is still a work in progress. See [openlayers/openlayers#6302](https://github.com/openlayers/openlayers/pull/6302) for ongoing discussion. diff --git a/tasks/generate-defines.js b/tasks/generate-defines.js deleted file mode 100644 index 3b1bd8af6b..0000000000 --- a/tasks/generate-defines.js +++ /dev/null @@ -1,31 +0,0 @@ -var fs = require('fs'); -var path = require('path'); -var esprima = require('esprima'); - -var mainPath = path.join(__dirname, '..', 'src', 'ol', 'index.js'); -var mainSource = fs.readFileSync(mainPath, 'utf8'); -var definesPath = path.join(__dirname, '..', 'build', 'defines.json'); - -function isDefineLikeStatement(statement) { - return statement.type === 'ExpressionStatement' && - statement.expression && statement.expression.type === 'AssignmentExpression' && - statement.expression.left.type === 'MemberExpression' && - statement.expression.right.type === 'Literal' && - statement.leadingComments; -} - -var ast = esprima.parse(mainSource, {attachComment: true}); -var defines = {}; -ast.body.forEach(function(statement) { - if (isDefineLikeStatement(statement)) { - var comment = statement.leadingComments[statement.leadingComments.length - 1].value; - if (comment.indexOf('* @define {') >= 0) { - var expression = statement.expression; - var name = expression.left.object.name + '.' + expression.left.property.name; - var value = expression.right.value; - defines[name] = value; - } - } -}); - -fs.writeFileSync(definesPath, JSON.stringify(defines, null, 2)); diff --git a/transforms/module.js b/transforms/module.js index b0c8485e9e..ca913825bc 100644 --- a/transforms/module.js +++ b/transforms/module.js @@ -10,10 +10,6 @@ function rename(name) { return `_${parts.join('_')}_`; } -function renameDefine(name) { - return name.replace('.', '_').toUpperCase(); -} - function resolve(fromName, toName) { const fromParts = fromName.split('.'); const toParts = toName.split('.'); @@ -106,6 +102,16 @@ function getMemberExpression(name) { return memberExpression(name); } +function getMemberExpressionAssignment(name) { + return { + type: 'ExpressionStatement', + expression: { + type: 'AssignmentExpression', + left: getMemberExpression(name) + } + }; +} + module.exports = function(info, api) { const j = api.jscodeshift; const root = j(info.source); @@ -127,24 +133,43 @@ module.exports = function(info, api) { return j.literal(defines[name]); }); - // replace goog.provide() + // remove goog.provide() let provide; root.find(j.ExpressionStatement, getGoogExpressionStatement('provide')) - .replaceWith(path => { + .forEach(path => { if (provide) { throw new Error(`Multiple provides in ${info.path}`); } provide = path.value.expression.arguments[0].value; - return j.variableDeclaration('var', [ - j.variableDeclarator(j.identifier(rename(provide)), j.objectExpression([])) - ]); - }); + }).remove(); if (!provide) { throw new Error(`No provide found in ${info.path}`); } replacements[provide] = rename(provide); + // replace provide assignment with variable declarator + // e.g. `ol.foo.Bar = function() {}` -> `var _ol_foo_Bar_ = function() {}` + let declaredProvide = false; + root.find(j.ExpressionStatement, getMemberExpressionAssignment(provide)) + .replaceWith(path => { + declaredProvide = true; + const statement = j.variableDeclaration('var', [ + j.variableDeclarator(j.identifier(rename(provide)), path.value.expression.right) + ]); + statement.comments = path.value.comments; + return statement; + }); + + if (!declaredProvide) { + const body = root.find(j.Program).get('body'); + body.unshift( + j.variableDeclaration('var', [ + j.variableDeclarator(j.identifier(rename(provide)), j.objectExpression([])) + ]) + ); + } + // replace `goog.require('foo')` with `import foo from 'foo'` const imports = []; root.find(j.ExpressionStatement, getGoogExpressionStatement('require'))