├── .gitignore ├── packages ├── synthesis-compiler │ ├── .npm │ │ └── package │ │ │ ├── .gitignore │ │ │ ├── README │ │ │ └── npm-shrinkwrap.json │ ├── synthesis-gen.js │ ├── synthesis-compiler-tests.js │ ├── package.js │ ├── .versions │ ├── LICENSE │ ├── synthesis-compiler.js │ └── README.md ├── synthesis-pug │ ├── .npm │ │ └── plugin │ │ │ ├── synthesis-jade │ │ │ ├── .gitignore │ │ │ ├── README │ │ │ └── npm-shrinkwrap.json │ │ │ └── synthesis-pug │ │ │ ├── .gitignore │ │ │ ├── README │ │ │ └── npm-shrinkwrap.json │ ├── synthesis-pug-tests.js │ ├── synthesis-client.js │ ├── package.js │ ├── LICENSE │ ├── .versions │ ├── plugin │ │ └── synthesis.js │ └── README.md ├── synthesis │ ├── synthesis-tests.js │ ├── synthesis-client.js │ ├── package.js │ ├── .versions │ ├── LICENSE │ ├── plugin │ │ └── synthesis.js │ └── README.md └── synthesis-assets │ ├── .versions │ ├── package.js │ ├── plugin │ └── synthesis-assets.js │ ├── LICENSE │ └── README.md ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/.npm/package/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-jade/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-pug/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /packages/synthesis/synthesis-tests.js: -------------------------------------------------------------------------------- 1 | // Import Tinytest from the tinytest Meteor package. 2 | import { Tinytest } from "meteor/tinytest"; 3 | 4 | // Write your tests here! 5 | // Here is an example. 6 | Tinytest.add('synthesis - example', function (test) { 7 | test.equal(true,true); 8 | }); 9 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/synthesis-gen.js: -------------------------------------------------------------------------------- 1 | export class _synthesizer { 2 | constructor(settings) { 3 | this.settings = settings; 4 | } 5 | generateJS(html, toHead) { 6 | const htmlStr = JSON.stringify(html); 7 | return ` 8 | Synthesis.render(${htmlStr},${!!toHead}); 9 | `; 10 | } 11 | 12 | } 13 | export const Synthesizer = new _synthesizer(); 14 | -------------------------------------------------------------------------------- /packages/synthesis-pug/synthesis-pug-tests.js: -------------------------------------------------------------------------------- 1 | // Import Tinytest from the tinytest Meteor package. 2 | import { Tinytest } from "meteor/tinytest"; 3 | 4 | // Import and rename a variable exported by synthesis-jade.js. 5 | import { name as packageName } from "meteor/synthesis-jade"; 6 | 7 | // Write your tests here! 8 | // Here is an example. 9 | Tinytest.add('synthesis-jade - example', function (test) { 10 | test.equal(packageName, "synthesis-jade"); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/.npm/package/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/synthesis-compiler-tests.js: -------------------------------------------------------------------------------- 1 | // Import Tinytest from the tinytest Meteor package. 2 | import { Tinytest } from 'meteor/tinytest'; 3 | 4 | // Import and rename a variable exported by synthesis-compiler.js. 5 | import { name as packageName } from 'meteor/synthesis-compiler'; 6 | 7 | // Write your tests here! 8 | // Here is an example. 9 | Tinytest.add('synthesis-compiler - example', (test) => { 10 | // Tests 11 | test.equal(packageName, 'synthesis-compiler'); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-jade/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-pug/README: -------------------------------------------------------------------------------- 1 | This directory and the files immediately inside it are automatically generated 2 | when you change this package's NPM dependencies. Commit the files in this 3 | directory (npm-shrinkwrap.json, .gitignore, and this README) to source control 4 | so that others run the same versions of sub-dependencies. 5 | 6 | You should NOT check in the node_modules directory that Meteor automatically 7 | creates; if you are using git, the .gitignore file tells git to ignore it. 8 | -------------------------------------------------------------------------------- /packages/synthesis-assets/.versions: -------------------------------------------------------------------------------- 1 | babel-compiler@6.13.0 2 | babel-runtime@0.1.12 3 | blaze-tools@1.0.10 4 | caching-compiler@1.1.9 5 | caching-html-compiler@1.0.7 6 | deps@1.0.12 7 | ecmascript@0.5.9 8 | ecmascript-runtime@0.3.15 9 | html-tools@1.0.11 10 | htmljs@1.0.11 11 | meteor@1.6.0 12 | minifier-js@1.2.14 13 | modules@0.7.7 14 | modules-runtime@0.7.7 15 | mwc:synthesis-assets@0.1.5 16 | promise@0.8.8 17 | random@1.0.10 18 | spacebars-compiler@1.0.13 19 | templating-tools@1.0.5 20 | tracker@1.0.14 21 | underscore@1.0.10 22 | -------------------------------------------------------------------------------- /packages/synthesis/synthesis-client.js: -------------------------------------------------------------------------------- 1 | export class _synthesizer { 2 | constructor(settings) { 3 | this.settings = settings; 4 | } 5 | render(str, head) { 6 | if (document.body) { 7 | const el = head ? document.head : document.body; 8 | const div = document.createElement('div'); 9 | const docFrag = document.createDocumentFragment(); 10 | div.innerHTML = str; 11 | while (div.children.length > 0) { 12 | docFrag.appendChild(div.children[0]); 13 | } 14 | el.appendChild(docFrag); 15 | } else { 16 | document.write(str); 17 | } 18 | } 19 | } 20 | 21 | Synthesis = new _synthesizer(); 22 | -------------------------------------------------------------------------------- /packages/synthesis-assets/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mwc:synthesis-assets', 3 | version: '0.1.5', 4 | summary: 'assets handling for synthesis', 5 | git: 'https://github.com/meteorwebcomponents/synthesis', 6 | documentation: 'README.md', 7 | }); 8 | 9 | Package.onUse((api) => { 10 | api.versionsFrom('1.3'); 11 | api.use('ecmascript'); 12 | api.use('isobuild:compiler-plugin@1.0.0'); 13 | }); 14 | 15 | Package.registerBuildPlugin({ 16 | name: 'synthesis-assets', 17 | use: [ 18 | 'caching-html-compiler@1.0.7', 19 | 'ecmascript@0.4.1', 20 | ], 21 | sources: [ 22 | 'plugin/synthesis-assets.js', 23 | ], 24 | }); 25 | -------------------------------------------------------------------------------- /packages/synthesis-pug/synthesis-client.js: -------------------------------------------------------------------------------- 1 | export class _synthesizer { 2 | constructor(settings) { 3 | this.settings = settings; 4 | } 5 | render(str, head) { 6 | if (document.body) { 7 | const el = head ? document.head : document.body; 8 | const div = document.createElement('div'); 9 | const docFrag = document.createDocumentFragment(); 10 | div.innerHTML = str; 11 | while (div.children.length > 0) { 12 | docFrag.appendChild(div.children[0]); 13 | } 14 | el.appendChild(docFrag); 15 | } else { 16 | document.write(str); 17 | } 18 | } 19 | } 20 | 21 | Synthesis = new _synthesizer(); 22 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mwc:synthesis-compiler', 3 | version: '1.3.11', 4 | summary: 'Synthesis is meteor + polymer', 5 | git: 'https://github.com/meteorwebcomponents/synthesis', 6 | documentation: 'README.md', 7 | }); 8 | 9 | Package.onUse((api) => { 10 | api.versionsFrom('1.3'); 11 | api.use('ecmascript'); 12 | api.use('babel-compiler'); 13 | api.use('caching-compiler@1.1.9'); 14 | api.mainModule('synthesis-compiler.js', 'server'); 15 | }); 16 | 17 | Package.onTest((api) => { 18 | api.use('ecmascript'); 19 | api.use('tinytest'); 20 | api.use('mwc:synthesis-compiler'); 21 | api.mainModule('synthesis-compiler-tests.js'); 22 | }); 23 | 24 | Npm.depends({ 25 | lodash: '4.17.4', 26 | polyclean: '1.3.1', 27 | parse5: '3.0.3', 28 | }); 29 | -------------------------------------------------------------------------------- /packages/synthesis-assets/plugin/synthesis-assets.js: -------------------------------------------------------------------------------- 1 | function SynthesisFileCompiler() {} 2 | SynthesisFileCompiler.prototype.processFilesForTarget = function (files) { 3 | files.forEach(function (file) { 4 | let packagePrefix = ''; 5 | if (file.getPackageName()) { 6 | packagePrefix += `/packages/${file.getPackageName()}/`; 7 | } 8 | 9 | const filePath = packagePrefix + file.getPathInPackage(); 10 | const content = file.getContentsAsBuffer(); 11 | 12 | file.addAsset({ 13 | path: filePath, 14 | data: content 15 | }); 16 | }); 17 | }; 18 | 19 | const img = ['png', 'jpg', 'jpeg', 'gif', 'tif', 'tiff', 'svg']; 20 | const font = ['ttf', 'woff', 'eot', 'otf', 'woff2']; 21 | const extensions = [...img, ...font]; 22 | 23 | Plugin.registerCompiler({ 24 | extensions, 25 | archMatching: 'web', 26 | }, function(){ 27 | return new SynthesisFileCompiler(); 28 | }); 29 | -------------------------------------------------------------------------------- /packages/synthesis/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mwc:synthesis', 3 | version: '1.3.12', 4 | summary: 'Synthesis is meteor + polymer', 5 | git: 'https://github.com/meteorwebcomponents/synthesis', 6 | documentation: 'README.md', 7 | }); 8 | 9 | Package.onUse((api) => { 10 | api.versionsFrom('1.3'); 11 | api.use('ecmascript'); 12 | api.use('isobuild:compiler-plugin@1.0.0'); 13 | api.addFiles('synthesis-client.js', 'client'); 14 | api.export('Synthesis', ['client']); 15 | }); 16 | 17 | Package.onTest((api) => { 18 | api.use('ecmascript'); 19 | api.use('tinytest'); 20 | api.use('mwc:synthesis'); 21 | api.mainModule('synthesis-tests.js'); 22 | }); 23 | 24 | 25 | Package.registerBuildPlugin({ 26 | name: 'synthesis', 27 | use: [ 28 | 'mwc:synthesis-compiler@1.3.11', 29 | 'caching-html-compiler@1.0.7', 30 | 'ecmascript@0.4.1', 31 | ], 32 | sources: [ 33 | 'plugin/synthesis.js', 34 | ], 35 | }); 36 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/.versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.1.0 2 | babel-compiler@6.24.7 3 | babel-runtime@1.1.1 4 | base64@1.0.10 5 | binary-heap@1.0.10 6 | boilerplate-generator@1.3.0 7 | caching-compiler@1.1.9 8 | callback-hook@1.0.10 9 | check@1.2.5 10 | ddp@1.4.0 11 | ddp-client@2.2.0 12 | ddp-common@1.3.0 13 | ddp-server@2.1.0 14 | diff-sequence@1.0.7 15 | ecmascript@0.9.0 16 | ecmascript-runtime@0.5.0 17 | ecmascript-runtime-client@0.5.0 18 | ecmascript-runtime-server@0.5.0 19 | ejson@1.1.0 20 | geojson-utils@1.0.10 21 | id-map@1.0.9 22 | local-test:mwc:synthesis-compiler@1.3.11 23 | logging@1.1.19 24 | meteor@1.8.0 25 | minimongo@1.4.0 26 | modules@0.11.0 27 | modules-runtime@0.9.0 28 | mongo@1.3.1 29 | mongo-dev-server@1.1.0 30 | mongo-id@1.0.6 31 | mwc:synthesis-compiler@1.3.11 32 | npm-mongo@2.2.33 33 | ordered-dict@1.0.9 34 | promise@0.10.0 35 | random@1.0.10 36 | retry@1.0.9 37 | routepolicy@1.0.12 38 | tinytest@1.0.12 39 | tracker@1.1.3 40 | underscore@1.0.10 41 | webapp@1.4.0 42 | webapp-hashing@1.0.9 43 | -------------------------------------------------------------------------------- /packages/synthesis-pug/package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'mwc:synthesis-pug', 3 | version: '1.3.11', 4 | summary: 'Synthesis is meteor + polymer', 5 | git: 'https://github.com/meteorwebcomponents/synthesis', 6 | documentation: 'README.md', 7 | }); 8 | 9 | Package.onUse((api) => { 10 | api.versionsFrom('1.3'); 11 | api.use('ecmascript'); 12 | api.use('isobuild:compiler-plugin@1.0.0'); 13 | api.addFiles('synthesis-client.js', 'client'); 14 | api.export('Synthesis', ['client']); 15 | }); 16 | 17 | Package.onTest((api) => { 18 | api.use('ecmascript'); 19 | api.use('tinytest'); 20 | api.use('mwc:synthesis-pug'); 21 | api.mainModule('synthesis-pug-tests.js'); 22 | }); 23 | 24 | 25 | Package.registerBuildPlugin({ 26 | name: 'synthesis-pug', 27 | use: [ 28 | 'mwc:synthesis-compiler@1.3.11', 29 | 'caching-html-compiler@1.0.7', 30 | 'ecmascript@0.4.1', 31 | ], 32 | sources: [ 33 | 'plugin/synthesis.js', 34 | ], 35 | npmDependencies: { 36 | pug: '2.0.0-beta6', 37 | }, 38 | }); 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Meteor Webcomponents 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/synthesis-pug/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Meteor Webcomponents 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/synthesis/.versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.1.0 2 | babel-compiler@6.24.7 3 | babel-runtime@1.1.1 4 | base64@1.0.10 5 | binary-heap@1.0.10 6 | blaze-tools@1.0.10 7 | boilerplate-generator@1.3.0 8 | caching-compiler@1.1.9 9 | caching-html-compiler@1.0.7 10 | callback-hook@1.0.10 11 | check@1.2.5 12 | ddp@1.4.0 13 | ddp-client@2.2.0 14 | ddp-common@1.3.0 15 | ddp-server@2.1.0 16 | deps@1.0.12 17 | diff-sequence@1.0.7 18 | ecmascript@0.9.0 19 | ecmascript-runtime@0.5.0 20 | ecmascript-runtime-client@0.5.0 21 | ecmascript-runtime-server@0.5.0 22 | ejson@1.1.0 23 | geojson-utils@1.0.10 24 | html-tools@1.0.11 25 | htmljs@1.0.11 26 | id-map@1.0.9 27 | local-test:mwc:synthesis@1.3.12 28 | logging@1.1.19 29 | meteor@1.8.0 30 | minimongo@1.4.0 31 | modules@0.11.0 32 | modules-runtime@0.9.0 33 | mongo@1.3.1 34 | mongo-dev-server@1.1.0 35 | mongo-id@1.0.6 36 | mwc:synthesis@1.3.12 37 | mwc:synthesis-compiler@1.3.11 38 | npm-mongo@2.2.33 39 | ordered-dict@1.0.9 40 | promise@0.10.0 41 | random@1.0.10 42 | retry@1.0.9 43 | routepolicy@1.0.12 44 | spacebars-compiler@1.1.0 45 | templating-tools@1.1.1 46 | tinytest@1.0.12 47 | tracker@1.1.3 48 | underscore@1.0.10 49 | webapp@1.4.0 50 | webapp-hashing@1.0.9 51 | -------------------------------------------------------------------------------- /packages/synthesis/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Meteor Webcomponents 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/synthesis-assets/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Meteor Webcomponents 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Meteor Webcomponents 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.versions: -------------------------------------------------------------------------------- 1 | allow-deny@1.1.0 2 | babel-compiler@6.24.7 3 | babel-runtime@1.1.1 4 | base64@1.0.10 5 | binary-heap@1.0.10 6 | blaze-tools@1.0.10 7 | boilerplate-generator@1.3.0 8 | caching-compiler@1.1.9 9 | caching-html-compiler@1.0.7 10 | callback-hook@1.0.10 11 | check@1.2.5 12 | ddp@1.4.0 13 | ddp-client@2.2.0 14 | ddp-common@1.3.0 15 | ddp-server@2.1.0 16 | deps@1.0.12 17 | diff-sequence@1.0.7 18 | ecmascript@0.9.0 19 | ecmascript-runtime@0.5.0 20 | ecmascript-runtime-client@0.5.0 21 | ecmascript-runtime-server@0.5.0 22 | ejson@1.1.0 23 | geojson-utils@1.0.10 24 | html-tools@1.0.11 25 | htmljs@1.0.11 26 | id-map@1.0.9 27 | local-test:mwc:synthesis-pug@1.3.11 28 | logging@1.1.19 29 | meteor@1.8.0 30 | minimongo@1.4.0 31 | modules@0.11.0 32 | modules-runtime@0.9.0 33 | mongo@1.3.1 34 | mongo-dev-server@1.1.0 35 | mongo-id@1.0.6 36 | mwc:synthesis-compiler@1.3.11 37 | mwc:synthesis-pug@1.3.11 38 | npm-mongo@2.2.33 39 | ordered-dict@1.0.9 40 | promise@0.10.0 41 | random@1.0.10 42 | retry@1.0.9 43 | routepolicy@1.0.12 44 | spacebars-compiler@1.1.0 45 | templating-tools@1.1.1 46 | tinytest@1.0.12 47 | tracker@1.1.3 48 | underscore@1.0.10 49 | webapp@1.4.0 50 | webapp-hashing@1.0.9 51 | -------------------------------------------------------------------------------- /packages/synthesis/plugin/synthesis.js: -------------------------------------------------------------------------------- 1 | import { parseHtml, handleTags } from 'meteor/mwc:synthesis-compiler'; 2 | import { CachingHtmlCompiler } from 'meteor/caching-html-compiler'; 3 | 4 | class PolymerCachingHtmlCompiler extends CachingHtmlCompiler { 5 | 6 | getCacheKey(inputFile) { 7 | return inputFile.getSourceHash(); 8 | } 9 | 10 | compileOneFile(inputFile) { 11 | const contents = inputFile.getContentsAsString(); 12 | let packagePrefix = ''; 13 | if (inputFile.getPackageName()) { 14 | packagePrefix += `/packages/${inputFile.getPackageName()}/`; 15 | } 16 | const inputPath = packagePrefix + inputFile.getPathInPackage(); 17 | // files inside folders with names demo/test/docs are skipped. 18 | if (inputPath.match(/\/(demo|test|docs).*\//) && !process.env.FORCESYNTHESIS) { 19 | return null; 20 | } 21 | try { 22 | const tags = this.tagScannerFunc({ 23 | sourceName: inputPath, 24 | contents, 25 | }); 26 | const result = this.tagHandlerFunc(tags); 27 | return result; 28 | } catch (e) { 29 | throw e; 30 | } 31 | } 32 | } 33 | 34 | Plugin.registerCompiler({ 35 | extensions: ['html', 'htm'], 36 | archMatching: 'web', 37 | isTemplate: true, 38 | }, () => new PolymerCachingHtmlCompiler('synthesis', parseHtml, handleTags)); 39 | -------------------------------------------------------------------------------- /packages/synthesis-pug/plugin/synthesis.js: -------------------------------------------------------------------------------- 1 | import { parseHtml, handleTags } from 'meteor/mwc:synthesis-compiler'; 2 | import { CachingHtmlCompiler } from 'meteor/caching-html-compiler'; 3 | import pug from 'pug'; 4 | 5 | class PolymerCachingHtmlCompiler extends CachingHtmlCompiler { 6 | 7 | getCacheKey(inputFile) { 8 | return inputFile.getSourceHash(); 9 | } 10 | 11 | compileOneFile(inputFile) { 12 | const contents = inputFile.getContentsAsString(); 13 | let packagePrefix = ''; 14 | 15 | if (inputFile.getPackageName()) { 16 | packagePrefix += `/packages/${inputFile.getPackageName()}/`; 17 | } 18 | 19 | const inputPath = packagePrefix + inputFile.getPathInPackage(); 20 | // files inside folders with names demo/test/docs are skipped. 21 | if (inputPath.match(/\/(demo|test|docs).*\//) && !process.env.FORCESYNTHESIS) { 22 | return null; 23 | } 24 | try { 25 | const fn = pug.compile(contents, { 26 | filename: inputFile.getPathInPackage(), 27 | }); 28 | const parsedJade = fn(); 29 | const tags = this.tagScannerFunc({ 30 | sourceName: inputPath, 31 | contents: parsedJade, 32 | }); 33 | const result = this.tagHandlerFunc(tags); 34 | return result; 35 | } catch (e) { 36 | throw e; 37 | } 38 | } 39 | } 40 | 41 | Plugin.registerCompiler({ 42 | extensions: ['pug'], 43 | archMatching: 'web', 44 | isTemplate: true, 45 | }, () => new PolymerCachingHtmlCompiler('synthesis-pug', parseHtml, handleTags)); 46 | 47 | -------------------------------------------------------------------------------- /packages/synthesis-pug/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Synthesis is meteor + polymer 3 | 4 | 5 | ## Installation 6 | 7 | Remove `blaze-html-templates` (or remove the html compiler you are using). 8 | 9 | `meteor remove blaze-html-templates` 10 | 11 | Install synthesis 12 | 13 | `meteor add mwc:synthesis` 14 | 15 | synthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler) 16 | 17 | You can optionally use these packages from meteorwebcomponents 18 | 19 | * [mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package. 20 | * [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer. 21 | * [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer. 22 | 23 | 24 | ## Usage 25 | 26 | Refer http://guide.meteor.com 27 | 28 | Application Structure http://guide.meteor.com/structure.html. 29 | 30 | Keeps all your components in imports folder 31 | 32 | You can import html using 33 | 34 | 1. Meteor's `import './component.pug';` 35 | 36 | 2. ` ` 37 | 38 | Script 39 | 1. ` ` 40 | 41 | 2. `` 42 | 43 | Css (its important follow these two methods to confine style inside the component.) 44 | 1. `` 45 | 46 | 2. `` 47 | 48 | Add bower_components to any folder inside imports directory. 49 | 50 | Assume bower directory is imports/ui/bower_components 51 | 52 | ```pug 53 | 54 | 55 | link(rel='import', href='test-element2.html') 56 | // imports/ui/component/test-element.html Gets imported 57 | link(rel='import', href='../bower_components/paper-button/paper-button.html') 58 | script(src='test-element.js') 59 | dom-module#test-element 60 | template 61 | link(rel='stylesheet', href='test-element.css') 62 | // converted to style tag. this style is restricted to elements inside the element 63 | style. 64 | #nndiv{color:blue} 65 | paper-button(on-click='showNickName') 66 | | Show nickname 67 | p 68 | | Name : {{name}} 69 | #nnDiv(hidden='{{nndHidden}}') 70 | | Nickname: {{ nickname }} 71 | ``` 72 | ```css 73 | /*imports/ui/component/test-element.css*/ 74 | paper-button{ 75 | color:red; 76 | } 77 | ``` 78 | ```js 79 | // imports/ui/component/test-element.js 80 | import './test-element.pug'; 81 | 82 | Polymer({ 83 | is:"test-element", 84 | properties:{ 85 | name:{ 86 | type:String, 87 | value:"Arun Kumar" 88 | }, 89 | nickname:{ 90 | type:String, 91 | value:"tkay" 92 | }, 93 | nndHidden:{ 94 | type:Boolean, 95 | value:true 96 | } 97 | }, 98 | showNickName: function () { 99 | this.nndHidden = false; 100 | } 101 | }) 102 | 103 | 104 | ``` 105 | 106 | ```html 107 | 108 | head 109 | title Synthesis 110 | body.fullbleed 111 | h1 Synthesis is Meteor + Polymer! 112 | test-element 113 | ``` 114 | ```js 115 | // client/index.js 116 | import '../imports/ui/components/test-element.html'; 117 | // include the webcomponents js file 118 | import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js"; 119 | 120 | //Remember to include a polymer component or polymer.html itself in any file 121 | 122 | import "../imports/ui/bower_components/polymer/polymer.html"; 123 | 124 | ``` 125 | Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time 126 | 127 | A sample bower.json (imports/ui/bower.json) 128 | 129 | ```json 130 | { 131 | "dependencies": { 132 | "iron-pages": "PolymerElements/iron-pages#^1.0.0", 133 | "neon-animations": "PolymerElements/neon-animations#^1.0.0", 134 | "paper-button": "PolymerElements/paper-button#^1.0.5", 135 | "polymer": "Polymer/polymer#^1.0.0" 136 | }, 137 | "name": "mwc-synthesis", 138 | "version": "0.0.1" 139 | } 140 | ``` 141 | 142 | ### Demo 143 | Check out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo) 144 | 145 | 146 | ### Kickstart Your Meteor Polymer projects 147 | [Kickstart a Meteor/Polymer project](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis. 148 | 149 | ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif) 150 | 151 | 152 | 153 | ### TODO 154 | 155 | - [ ] extend file1.pug 156 | 157 | ### Social 158 | 159 | Gitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 160 | 161 | Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536 162 | 163 | > NO NEED to use any VULCANIZING tools. Synthesis handles everything 164 | 165 | 166 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-pug/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "dependencies": { 4 | "acorn": { 5 | "version": "3.3.0", 6 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz", 7 | "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=" 8 | }, 9 | "acorn-globals": { 10 | "version": "3.0.0", 11 | "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.0.0.tgz", 12 | "integrity": "sha1-GmTdj6dhKIWUYgZJUm4mJZF6VsY=" 13 | }, 14 | "align-text": { 15 | "version": "0.1.4", 16 | "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", 17 | "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=" 18 | }, 19 | "amdefine": { 20 | "version": "1.0.1", 21 | "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", 22 | "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" 23 | }, 24 | "asap": { 25 | "version": "2.0.5", 26 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.5.tgz", 27 | "integrity": "sha1-UidltQw1EEkOUtfc/ghe+bqWlY8=" 28 | }, 29 | "async": { 30 | "version": "0.2.10", 31 | "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", 32 | "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E=" 33 | }, 34 | "camelcase": { 35 | "version": "1.2.1", 36 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", 37 | "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=" 38 | }, 39 | "center-align": { 40 | "version": "0.1.3", 41 | "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", 42 | "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=" 43 | }, 44 | "character-parser": { 45 | "version": "2.2.0", 46 | "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz", 47 | "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=" 48 | }, 49 | "clean-css": { 50 | "version": "3.4.23", 51 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.23.tgz", 52 | "integrity": "sha1-YE+7yiTBL+tZsC8AuE8ft97W0AE=" 53 | }, 54 | "cliui": { 55 | "version": "2.1.0", 56 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", 57 | "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=" 58 | }, 59 | "commander": { 60 | "version": "2.8.1", 61 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz", 62 | "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=" 63 | }, 64 | "constantinople": { 65 | "version": "3.1.0", 66 | "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.0.tgz", 67 | "integrity": "sha1-dWnKqKo/jVk11i4fqW+fcCzYHHk=" 68 | }, 69 | "decamelize": { 70 | "version": "1.2.0", 71 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", 72 | "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" 73 | }, 74 | "doctypes": { 75 | "version": "1.1.0", 76 | "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz", 77 | "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=" 78 | }, 79 | "graceful-readlink": { 80 | "version": "1.0.1", 81 | "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", 82 | "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=" 83 | }, 84 | "is-buffer": { 85 | "version": "1.1.4", 86 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.4.tgz", 87 | "integrity": "sha1-z8hszV3FpS+oBIkRHGkgxFfi2Ys=" 88 | }, 89 | "is-expression": { 90 | "version": "2.1.0", 91 | "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-2.1.0.tgz", 92 | "integrity": "sha1-kb6dR968/vB3l36XIr5tz7RGXvA=" 93 | }, 94 | "is-promise": { 95 | "version": "2.1.0", 96 | "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", 97 | "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=" 98 | }, 99 | "is-regex": { 100 | "version": "1.0.3", 101 | "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.3.tgz", 102 | "integrity": "sha1-DVUYK9358v3ieCIK7Dp1ZCyQhjc=" 103 | }, 104 | "js-stringify": { 105 | "version": "1.0.2", 106 | "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz", 107 | "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=" 108 | }, 109 | "jstransformer": { 110 | "version": "1.0.0", 111 | "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz", 112 | "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=" 113 | }, 114 | "kind-of": { 115 | "version": "3.1.0", 116 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.1.0.tgz", 117 | "integrity": "sha1-R11pil5J/15T0U4+cyQp3Iv0z0c=" 118 | }, 119 | "lazy-cache": { 120 | "version": "1.0.4", 121 | "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", 122 | "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=" 123 | }, 124 | "longest": { 125 | "version": "1.0.1", 126 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", 127 | "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=" 128 | }, 129 | "object-assign": { 130 | "version": "4.1.0", 131 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz", 132 | "integrity": "sha1-ejs9DpgGPUP0wD8uiubNUahog6A=" 133 | }, 134 | "promise": { 135 | "version": "7.1.1", 136 | "resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz", 137 | "integrity": "sha1-SJZUxpJha4qlWwck+oCbt9tJxb8=" 138 | }, 139 | "pug": { 140 | "version": "2.0.0-beta6", 141 | "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.0-beta6.tgz", 142 | "integrity": "sha1-nq0uWeVApGfvw3h8ywPkV0ul+uk=" 143 | }, 144 | "pug-attrs": { 145 | "version": "2.0.1", 146 | "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-2.0.1.tgz", 147 | "integrity": "sha1-i13XwzBzDAn2Ipnga1j9DrxOv9U=" 148 | }, 149 | "pug-code-gen": { 150 | "version": "1.1.0", 151 | "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-1.1.0.tgz", 152 | "integrity": "sha1-9jim1XkhhVNqSiuzy3O49Fi9wB8=" 153 | }, 154 | "pug-error": { 155 | "version": "1.3.1", 156 | "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-1.3.1.tgz", 157 | "integrity": "sha1-YWJ0JcP4swexw4sQoLbVyOGjWB8=" 158 | }, 159 | "pug-filters": { 160 | "version": "1.2.4", 161 | "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-1.2.4.tgz", 162 | "integrity": "sha1-kthSRyx0UIVyoNmwyR+dy5rgWDk=" 163 | }, 164 | "pug-lexer": { 165 | "version": "2.3.0", 166 | "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-2.3.0.tgz", 167 | "integrity": "sha1-uEGsTNjSdQEoHg+ciPtCQyl6/zo=", 168 | "dependencies": { 169 | "acorn": { 170 | "version": "4.0.4", 171 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.4.tgz", 172 | "integrity": "sha1-F6jWp6bE71OLgU7Jq6wneSk78wo=" 173 | }, 174 | "is-expression": { 175 | "version": "3.0.0", 176 | "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-3.0.0.tgz", 177 | "integrity": "sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=" 178 | } 179 | } 180 | }, 181 | "pug-linker": { 182 | "version": "1.0.1", 183 | "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-1.0.1.tgz", 184 | "integrity": "sha1-1tp5uRDmg9MxNWcWgEfrr+2S0VM=" 185 | }, 186 | "pug-load": { 187 | "version": "2.0.3", 188 | "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-2.0.3.tgz", 189 | "integrity": "sha1-/oz4OPecmhJJeFd01Suh1+pD3zc=" 190 | }, 191 | "pug-parser": { 192 | "version": "2.0.1", 193 | "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-2.0.1.tgz", 194 | "integrity": "sha1-3Cxbu3dwR+mDWc1gaGD3X0v8FUE=" 195 | }, 196 | "pug-runtime": { 197 | "version": "2.0.2", 198 | "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-2.0.2.tgz", 199 | "integrity": "sha1-lzMavOM5pUNiVKf5sL1lvhFmXCE=" 200 | }, 201 | "pug-strip-comments": { 202 | "version": "1.0.1", 203 | "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-1.0.1.tgz", 204 | "integrity": "sha1-iWlZIaNPz1aFXUMCtCZoa0Jrr9E=" 205 | }, 206 | "pug-walk": { 207 | "version": "1.0.0", 208 | "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-1.0.0.tgz", 209 | "integrity": "sha1-f0rhRWpPGP7uQKDXCLdcHFHS5OQ=" 210 | }, 211 | "repeat-string": { 212 | "version": "1.6.1", 213 | "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", 214 | "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" 215 | }, 216 | "resolve": { 217 | "version": "1.2.0", 218 | "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.2.0.tgz", 219 | "integrity": "sha1-lYnD8vYUnRQXpAvswWY9tuxrwmw=" 220 | }, 221 | "right-align": { 222 | "version": "0.1.3", 223 | "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", 224 | "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=" 225 | }, 226 | "source-map": { 227 | "version": "0.4.4", 228 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", 229 | "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=" 230 | }, 231 | "token-stream": { 232 | "version": "0.0.1", 233 | "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-0.0.1.tgz", 234 | "integrity": "sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=" 235 | }, 236 | "uglify-js": { 237 | "version": "2.7.5", 238 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.7.5.tgz", 239 | "integrity": "sha1-RhLAx7qu4rp8SH3kkErhIgefLKg=", 240 | "dependencies": { 241 | "source-map": { 242 | "version": "0.5.6", 243 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", 244 | "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" 245 | } 246 | } 247 | }, 248 | "uglify-to-browserify": { 249 | "version": "1.0.2", 250 | "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", 251 | "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=" 252 | }, 253 | "void-elements": { 254 | "version": "2.0.1", 255 | "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", 256 | "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=" 257 | }, 258 | "window-size": { 259 | "version": "0.1.0", 260 | "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", 261 | "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=" 262 | }, 263 | "with": { 264 | "version": "5.1.1", 265 | "resolved": "https://registry.npmjs.org/with/-/with-5.1.1.tgz", 266 | "integrity": "sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=" 267 | }, 268 | "wordwrap": { 269 | "version": "0.0.2", 270 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", 271 | "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=" 272 | }, 273 | "yargs": { 274 | "version": "3.10.0", 275 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", 276 | "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=" 277 | } 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/synthesis-compiler.js: -------------------------------------------------------------------------------- 1 | import parse5 from 'parse5'; 2 | import polyclean from 'polyclean'; 3 | import fs from 'fs'; 4 | import path from 'path'; 5 | import _ from 'lodash'; 6 | import { Babel } from 'meteor/babel-compiler'; 7 | import { Synthesizer } from './synthesis-gen.js'; 8 | 9 | export const parseHtml = (arg) => { 10 | const contents = arg.contents; 11 | const parsed = parse5.parse(contents); 12 | // parsed is a json object 13 | const tag = { 14 | tagName: 'template', 15 | attribs: { 16 | id: arg.sourceName, 17 | }, 18 | contents: parsed, 19 | fileContents: arg.contents, 20 | sourceName: arg.sourceName, 21 | }; 22 | return tag; 23 | }; 24 | class DissectHtml { 25 | constructor() { 26 | this.dissected = { 27 | head: '', 28 | body: '', 29 | js: '//*synthesis*//\n', 30 | tailJs: '', // tailJs is appened last 31 | bodyAttrs: {}, 32 | }; 33 | } 34 | dissect(tag) { 35 | this.document = tag.contents; 36 | this.sourceName = tag.sourceName; 37 | const self = this; 38 | const children = this.document.childNodes || []; 39 | for (let i = 0; i < children.length; i += 1) { 40 | const child = children[i]; 41 | switch (child.nodeName) { 42 | case '#documentType': 43 | break; 44 | case '#comment': 45 | break; 46 | case 'html': { 47 | const _children = child.childNodes || []; 48 | for (let _i = 0; _i < _children.length; _i += 1) { 49 | const _child = _children[_i]; 50 | switch (_child.nodeName) { 51 | case 'head': { 52 | _child.childNodes = self.processChildNodes(_child.childNodes); 53 | const headContents = parse5.serialize(_child); 54 | // for files inside client folder html contents can be 55 | // directly added to dissected.html 56 | if (self.sourceName.match(/^client\//)) { 57 | self.dissected.head += headContents; 58 | } else { 59 | self.dissected.js += `\n${Synthesizer.generateJS(headContents, true)}\n`; 60 | } 61 | } 62 | break; 63 | case 'body': { 64 | const body = _child; 65 | body.attrs.forEach((attr) => { 66 | const bodyAttrs = self.dissected.bodyAttrs; 67 | const hasNameAttr = {}.hasOwnProperty.call(bodyAttrs, attr.name); 68 | if (!hasNameAttr) { 69 | self.dissected.bodyAttrs[attr.name] = attr.value; 70 | } 71 | }); 72 | delete body.attrs; 73 | body.childNodes = self.processChildNodes(body.childNodes); 74 | const bodyContents = parse5.serialize(body); 75 | if (self.sourceName.match(/^client\//)) { 76 | self.dissected.body += bodyContents; 77 | } else { 78 | self.dissected.js += `\n${Synthesizer.generateJS(bodyContents)}\n`; 79 | } 80 | } 81 | break; 82 | default: 83 | break; 84 | } 85 | } 86 | } 87 | break; 88 | default: 89 | break; 90 | } 91 | } 92 | this.dissected.js += `\n${this.dissected.tailJs}\n`; 93 | } 94 | processChildNodes(childNodes) { 95 | const self = this; 96 | let pushNodes = []; 97 | const processedNodes = _.compact(_.map(childNodes, (child) => { 98 | switch (child.nodeName) { 99 | case 'template': { 100 | const template = child; 101 | const tmContent = template.content; 102 | const isWalkable = tmContent && tmContent.nodeName === '#document-fragment' && tmContent.childNodes; 103 | if (isWalkable) { 104 | tmContent.childNodes = self.processChildNodes(tmContent.childNodes); 105 | } 106 | template.content = tmContent; 107 | return template; 108 | } 109 | case 'link': { 110 | const processedLinkChild = self.processLinks(child); 111 | if (processedLinkChild) { 112 | return processedLinkChild; 113 | } 114 | } 115 | break; 116 | case 'script': { 117 | const result = self.processScripts(child); 118 | if (result) { 119 | return result; 120 | } 121 | } 122 | break; 123 | case 'style': { 124 | if (child.childNodes && child.childNodes.length) { 125 | const childNode = child.childNodes[0]; 126 | const css = childNode.value; 127 | const result = self.processStyle(css); 128 | if (result) { 129 | childNode.value = result; 130 | } 131 | } 132 | return child; 133 | } 134 | case 'dom-module': { 135 | const domModule = child; 136 | if (domModule.childNodes) { 137 | domModule.childNodes = self.processChildNodes(domModule.childNodes); 138 | } 139 | return domModule; 140 | } 141 | case 'div': { 142 | const divChild = child; 143 | const attrs = _.filter(divChild.attrs, o => (o.name === 'hidden' || o.name === 'by-vulcanize')); 144 | if (attrs.length >= 2) { 145 | const _childNodes = self.processChildNodes(divChild.childNodes); 146 | pushNodes = pushNodes.concat(_childNodes); 147 | } else { 148 | if (divChild.childNodes) { 149 | divChild.childNodes = self.processChildNodes(divChild.childNodes); 150 | } 151 | return divChild; 152 | } 153 | } 154 | break; 155 | case '#comment': 156 | break; 157 | 158 | default: { 159 | const defChild = child; 160 | const attrs = _.map(defChild.attrs, (o) => { 161 | // all src values without [[*]] and {{*}} 162 | if (o.name === 'src' || o.name === 'src$') { 163 | o.value = self._changeRelUrl(o.value); 164 | } 165 | return o; 166 | }); 167 | defChild.attrs = attrs; 168 | if (defChild.childNodes) { 169 | defChild.childNodes = self.processChildNodes(defChild.childNodes); 170 | } 171 | return defChild; 172 | } 173 | } 174 | return null; 175 | })); 176 | return processedNodes.concat(pushNodes); 177 | } 178 | processStyle(css, cssBasePath) { 179 | return this._changeCssUrls(polyclean.stripCss(css), cssBasePath); 180 | } 181 | processScripts(child) { 182 | const self = this; 183 | const importSource = _.find(child.attrs, v => (v.name === 'src')); 184 | if (importSource && importSource.value) { 185 | const importableUrl = self.importableUrl(importSource.value); 186 | if (!importableUrl) { 187 | return child; 188 | } 189 | self.dissected.tailJs += `\nrequire('${importableUrl}');\n`; 190 | } else { 191 | self.dissected.tailJs += `\n${self.babelJs(parse5.serialize(child))}\n`; 192 | } 193 | return null; 194 | } 195 | babelJs(js) { 196 | const babelOptions = Babel.getDefaultOptions(); 197 | // const prod = process.env.NODE_ENV ==='production'; 198 | const external = this.sourceName.match(/node_modules\//); 199 | // const buildFile = this.sourceName === 'imports/ui/build.html'; 200 | // return (!external && !buildFile) ? Babel.compile(js, babelOptions).code : js; 201 | try { 202 | return !external ? Babel.compile(js, babelOptions).code: js; 203 | } 204 | catch (err) { 205 | console.error(`Error in ${this.sourceName}`); 206 | console.error(err); 207 | } 208 | } 209 | 210 | importableUrl(url) { 211 | if (url.match(/^(\/|https?:\/)/)) { 212 | return false; 213 | } 214 | return url.match(/^(\.\/|\.\.\/)/) ? url : `./${url}`; 215 | } 216 | processLinks(child) { 217 | const self = this; 218 | // and 219 | const supportedRels = ['import', 'stylesheet']; 220 | const ifImport = _.find(child.attrs, v => (v.name === 'rel' && supportedRels.indexOf(v.value) > -1)); 221 | if (ifImport) { 222 | const hrefAttr = _.find(child.attrs, v => v.name === 'href'); 223 | if (hrefAttr) { 224 | if (hrefAttr.value) { 225 | switch (ifImport.value) { 226 | case 'import': { 227 | // file is imported using require 228 | const url = self.importableUrl(hrefAttr.value); 229 | if (!url) { 230 | return child; 231 | } 232 | const typeAttr = _.find(child.attrs, v => (v.name === 'type')); 233 | if (typeAttr) { 234 | switch (typeAttr.value) { 235 | case 'css': 236 | const styleChild = self.processCssImport(hrefAttr, child); 237 | return styleChild; 238 | default: 239 | break; 240 | } 241 | } 242 | const link = `require('${url}');`; 243 | self.dissected.tailJs += `\n${link}\n`; 244 | } 245 | break; 246 | // Processing 247 | case 'stylesheet': 248 | // absolute file path 249 | return self.processCssImport(hrefAttr, child); 250 | default: 251 | break; 252 | } 253 | } 254 | } else { 255 | return child; 256 | } 257 | } else { 258 | return child; 259 | } 260 | return null; 261 | } 262 | _changeRelUrl(inpUrl, basePath) { 263 | // avoids var(--url-variable) and bound properties [[prop]] and {{prop}} and data urls 264 | const linkIsNotVar = !inpUrl.match(/^data:|var\(.*?\)|({{|\[\[).*(}}|\]\])/ig) 265 | if (inpUrl && linkIsNotVar) { 266 | // avoids absolute & remote urls 267 | const url = this.importableUrl(inpUrl); 268 | if (url) { 269 | return path.resolve(path.dirname((basePath || `/${this.sourceName}`)), inpUrl); 270 | } 271 | } 272 | return inpUrl; 273 | 274 | } 275 | _changeCssUrls(text, cssBasePath) { 276 | const self = this; 277 | // to get -> property: url(filepath) 278 | 279 | const processed = text.replace(/url\(['|"]?([^)]+?)['|"]?\)/ig, function(_u, url) { 280 | // to get -> filepath from url(filepath), url('filepath') and url("filepath") 281 | return `url(${self._changeRelUrl(url, cssBasePath)})`; 282 | }); 283 | return processed; 284 | } 285 | processCssImport(hrefAttr, child) { 286 | const url = path.resolve(this.sourceName, '../', hrefAttr.value); 287 | // checks if file exists 288 | if (fs.existsSync(url)) { 289 | const contents = fs.readFileSync(url, 'utf8'); 290 | const cssBasePath = path.resolve(path.dirname(`/${this.sourceName}`), hrefAttr.value); 291 | // css is inlined 292 | const minified = this.processStyle(contents, cssBasePath); 293 | if (minified) { 294 | // link tag is replaced with style tag 295 | return _.extend(child, { 296 | nodeName: 'style', 297 | tagName: 'style', 298 | attrs: [], 299 | childNodes: [ 300 | { 301 | nodeName: '#text', 302 | value: minified, 303 | }, 304 | ], 305 | }); 306 | } 307 | } 308 | return child; 309 | } 310 | } 311 | 312 | export const handleTags = (tags) => { 313 | const handler = new DissectHtml(); 314 | handler.dissect(tags); 315 | return handler.dissected; 316 | }; 317 | 318 | export const name = 'synthesis-compiler'; 319 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Synthesis is meteor + polymer 2 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 3 | 4 | ## About 5 | 6 | Synthesis helps you use polymer inside meteor. 7 | 8 | ### Under the hood 9 | 10 | Synthesis uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. 11 | Does not use any regex to parse html. :) 12 | 13 | > A version that uses cheerio instead of parse ⇒ [synthesis-using-cheerio](https://github.com/meteorwebcomponents/synthesis/tree/cheerio). 14 | 15 | #####Main functions 16 | 17 | 1. Handles html link imports which polymer uses to add dependency files. 18 | 2. Handles external script files (script src) 19 | 3. Handles external css files (link rel stylesheet) 20 | 4. Handles template tags. 21 | 5. Removes comments and unecessary whitespaces. 22 | 5. Handles loading order of html and js inside the polymer files 23 | 4. Adds components to document during runtime. 24 | 25 | ## Installation 26 | 27 | Remove `blaze-html-templates` (or remove the html compiler you are using). 28 | 29 | `meteor remove blaze-html-templates` 30 | 31 | > If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 32 | 33 | Install synthesis 34 | 35 | ```sh 36 | meteor add mwc:synthesis #compiles html files 37 | # synthesis-assets is optional. If you want to handle relative asset paths. 38 | meteor add mwc:synthesis-assets #compiles assets for to work. 39 | ``` 40 | 41 | synthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler) 42 | 43 | You can optionally use these packages from meteorwebcomponents 44 | 45 | * [mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package. 46 | * [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer. 47 | * [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer. 48 | 49 | 50 | ## Usage 51 | 52 | ### Polymer Settings 53 | 54 | Create client/lib/settings.js 55 | 56 | Why lib directory ? Settings code should run before anything else. 57 | 58 | ```js 59 | /* client/lib/settings.js */ 60 | window.Polymer = { 61 | //dom: 'shadow', 62 | lazyRegister: true 63 | }; 64 | ``` 65 | ### App Structure 66 | 67 | Refer http://guide.meteor.com 68 | 69 | Application Structure http://guide.meteor.com/structure.html. 70 | 71 | Keep all your components in imports folder 72 | 73 | You can import html using 74 | 75 | 1. `import './component.html';` from js files 76 | 77 | 2. ` `from html files 78 | 79 | > Please note that `import 'package/package.html;'` imports from node_modules directory while `` is the same as `import "./package/package.html";`. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as ``. 80 | 81 | > If you want to import scripts/stylesheets/html from public use `src="/path/to/my/file"`. `src="path/to/my/file"` is interpreted as `import "./path/to/my/file"`. 82 | 83 | Script 84 | 85 | 1. ` ` 86 | 87 | 2. `` 88 | 89 | Css (its important follow these two methods to confine style inside the component.) 90 | 91 | 1. `` 92 | 93 | 2. `` 94 | 95 | Add bower_components to any folder inside imports directory. 96 | 97 | Assume bower directory is imports/ui/bower_components 98 | 99 | ```html 100 | 101 | 102 | 103 | 104 | 105 | 106 | 121 | 122 | 123 | ``` 124 | ```css 125 | /*imports/ui/component/test-element.css*/ 126 | paper-button{ 127 | color:red; 128 | } 129 | ``` 130 | ```js 131 | // imports/ui/component/test-element.js 132 | import './test-element.html'; 133 | 134 | Polymer({ 135 | is:"test-element", 136 | properties:{ 137 | name:{ 138 | type:String, 139 | value:"Arun Kumar" 140 | }, 141 | nickname:{ 142 | type:String, 143 | value:"tkay" 144 | }, 145 | nndHidden:{ 146 | type:Boolean, 147 | value:true 148 | } 149 | }, 150 | showNickName: function () { 151 | this.nndHidden = false; 152 | } 153 | }) 154 | 155 | 156 | ``` 157 | 158 | ```html 159 | 160 | 161 | Synthesis 162 | 163 | 164 | 165 | 166 |

Synthesis is Meteor + Polymer!

167 | 168 | 169 | ``` 170 | ```js 171 | // client/index.js 172 | import '../imports/ui/components/test-element.html'; 173 | // include the webcomponents js file 174 | import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js"; 175 | 176 | //Remember to include a polymer component or polymer.html itself in any file 177 | 178 | import "../imports/ui/bower_components/polymer/polymer.html"; 179 | 180 | ``` 181 | Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time. Refer the [FAQ](#faq) 182 | 183 | A sample bower.json (imports/ui/bower.json) 184 | 185 | ```json 186 | { 187 | "dependencies": { 188 | "iron-pages": "PolymerElements/iron-pages#^1.0.0", 189 | "neon-animations": "PolymerElements/neon-animations#^1.0.0", 190 | "paper-button": "PolymerElements/paper-button#^1.0.5", 191 | "polymer": "Polymer/polymer#^1.0.0" 192 | }, 193 | "name": "mwc-synthesis", 194 | "version": "0.0.1" 195 | } 196 | ``` 197 | 198 | ### Using Polymer from npm instead of bower 199 | 200 | Here is a working demo of using npm polymer package instead of bower. 201 | 202 | https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo 203 | 204 | `npm install --save @polymer/paper-button` 205 | 206 | Before everything else load webcomponents and polymer 207 | 208 | ```js 209 | import "webcomponents.js/webcomponents-lite.min.js"; 210 | import "@polymer/polymer/polymer.html"; 211 | ``` 212 | 213 | Use it from js files as 214 | ```js 215 | import "@polymer/paper-button/paper-button.html"; 216 | ``` 217 | >Please note that the @polymer packages are still in testing stage. And the polymer version is an older one. 218 | 219 | ### Assets 220 | 221 | works inside html. 222 | 223 | ```html 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | ``` 236 | works inside css also. 237 | 238 | ```css 239 | 240 | /*imports/ui/path/to/element.html inside style tag or imports/ui/path/to/element.css */ 241 | background: url(path/to/image.png); /* Works!!. */ 242 | property: url(relative/path/to/image.png); /* Works!!. */ 243 | property: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */ 244 | /* if you want to use variables use 245 | --url-var = url(path/to/url); 246 | property: var(--url-var); 247 | */ 248 | property: url(/path/to/image.png); /* Works!!. if asset is in public folder */ 249 | ``` 250 | 251 | File types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19. 252 | 253 | Feel free to add pr's if you want to supports more file types. 254 | 255 | Relevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 . 256 | 257 | ### Demo 258 | 259 | #####Using Bower 260 | 261 | Check out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo) 262 | 263 | #####Using npm 264 | 265 | Check out the [synthesis-meteor-polymer-npm-demo](https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo) 266 | 267 | ### Kickstart Your Meteor Polymer projects 268 | [Kickstart a Meteor/Polymer project - FlowRouter](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis. 269 | 270 | [KickStart Meteor/Polymer Project - Polymer App Route](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route) 271 | 272 | ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif) 273 | 274 | ### Like it? 275 | 276 | :star: this repo 277 | 278 | ### Found a bug? 279 | 280 | Raise an issue! 281 | 282 | ### TODO 283 | 284 | ### Social 285 | 286 | Gitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 287 | 288 | Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536 289 | 290 | > NO NEED to use any VULCANIZING tools. Synthesis handles everything 291 | 292 | ### FAQ 293 | 294 | Q: When I tried to set `window.Polymer = {lazyRegister:true,dom:"shadow"}` it resulted in error. 295 | 296 | Ans : Refer [polymer settings](#polymer-settings) 297 | 298 | Q: When I added (a) bower component(s) build time became painstakingly high. 299 | 300 | Ans : The component(s) you've added might have many js files. meteor ecmascripts gets frozen/takes a long time when the number of js files are very high. Refer the issue https://github.com/meteor/meteor/issues/6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue. 301 | 302 | In console (pwd = /imports/ui) 303 | ```sh 304 | find bower_components -name \*.js | wc -l 305 | ``` 306 | Try to find out which package contains large number of js files. Delete unecessary files and keep a local copy. 307 | 308 | [bower-installer](https://github.com/blittle/bower-installer) can be used instead of bower to bring in just the files that you need for your project. Significantly lowers the build time. 309 | 310 | Q: Is it possible to use npm instead of bower for loading polymer and components 311 | 312 | Ans : Yes there is. Refer [using npm instead of bower](#using-polymer-from-npm-instead-of-bower) 313 | 314 | Q: Can I use Polymer and blaze together? 315 | 316 | Ans: You can. If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 317 | 318 | Use blaze.html extension for blaze files. 319 | 320 | But there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk 321 | 322 | Q: I love blaze's template level subscriptions and spacebars. I dont want to lose these features when I port my app to polymer. Any help? 323 | 324 | Ans : In my experience I find nothing that polymer cannot do which blaze can. Polymer is very easy to learn and while porting your app you'll find yourself copy pasting most of your code. For every blaze function they have solutions in polymer. We have got you covered when it comes to meteor data and subscriptions (including template level subs) Refer [mixin](https://github.com/meteorwebcomponents/mixin) . 325 | -------------------------------------------------------------------------------- /packages/synthesis/README.md: -------------------------------------------------------------------------------- 1 | # Synthesis is meteor + polymer 2 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 3 | 4 | 5 | 6 | ## About 7 | 8 | Synthesis helps you use polymer inside meteor. 9 | 10 | ### Under the hood 11 | 12 | Synthesis uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. 13 | Does not use any regex to parse html. :) 14 | 15 | > A version that uses cheerio instead of parse ⇒ [synthesis-using-cheerio](https://github.com/meteorwebcomponents/synthesis/tree/cheerio). 16 | 17 | #####Main functions 18 | 19 | 1. Handles html link imports which polymer uses to add dependency files. 20 | 2. Handles external script files (script src) 21 | 3. Handles external css files (link rel stylesheet) 22 | 4. Handles template tags. 23 | 5. Removes comments and unecessary whitespaces. 24 | 5. Handles loading order of html and js inside the polymer files 25 | 4. Adds components to document during runtime. 26 | 27 | ## Installation 28 | 29 | Remove `blaze-html-templates` (or remove the html compiler you are using). 30 | 31 | `meteor remove blaze-html-templates` 32 | 33 | > If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 34 | 35 | Install synthesis 36 | 37 | ```sh 38 | meteor add mwc:synthesis #compiles html files 39 | # synthesis-assets is optional. If you want to handle relative asset paths. 40 | meteor add mwc:synthesis-assets #compiles assets for to work. 41 | ``` 42 | 43 | synthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler) 44 | 45 | You can optionally use these packages from meteorwebcomponents 46 | 47 | * [mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package. 48 | * [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer. 49 | * [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer. 50 | 51 | 52 | ## Usage 53 | 54 | ### Polymer Settings 55 | 56 | Create client/lib/settings.js 57 | 58 | Why lib directory ? Settings code should run before anything else. 59 | 60 | ```js 61 | /* client/lib/settings.js */ 62 | window.Polymer = { 63 | //dom: 'shadow', 64 | lazyRegister: true 65 | }; 66 | ``` 67 | ### App Structure 68 | 69 | Refer http://guide.meteor.com 70 | 71 | Application Structure http://guide.meteor.com/structure.html. 72 | 73 | Keep all your components in imports folder 74 | 75 | You can import html using 76 | 77 | 1. `import './component.html';` from js files 78 | 79 | 2. ` `from html files 80 | 81 | > Please note that `import 'package/package.html;'` imports from node_modules directory while `` is the same as `import "./package/package.html";`. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as ``. 82 | 83 | > If you want to import scripts/stylesheets/html from public use `src="/path/to/my/file"`. `src="path/to/my/file"` is interpreted as `import "./path/to/my/file"`. 84 | 85 | Script 86 | 87 | 1. ` ` 88 | 89 | 2. `` 90 | 91 | Css (its important follow these two methods to confine style inside the component.) 92 | 93 | 1. `` 94 | 95 | 2. `` 96 | 97 | Add bower_components to any folder inside imports directory. 98 | 99 | Assume bower directory is imports/ui/bower_components 100 | 101 | ```html 102 | 103 | 104 | 105 | 106 | 107 | 108 | 123 | 124 | 125 | ``` 126 | ```css 127 | /*imports/ui/component/test-element.css*/ 128 | paper-button{ 129 | color:red; 130 | } 131 | ``` 132 | ```js 133 | // imports/ui/component/test-element.js 134 | import './test-element.html'; 135 | 136 | Polymer({ 137 | is:"test-element", 138 | properties:{ 139 | name:{ 140 | type:String, 141 | value:"Arun Kumar" 142 | }, 143 | nickname:{ 144 | type:String, 145 | value:"tkay" 146 | }, 147 | nndHidden:{ 148 | type:Boolean, 149 | value:true 150 | } 151 | }, 152 | showNickName: function () { 153 | this.nndHidden = false; 154 | } 155 | }) 156 | 157 | 158 | ``` 159 | 160 | ```html 161 | 162 | 163 | Synthesis 164 | 165 | 166 | 167 | 168 |

Synthesis is Meteor + Polymer!

169 | 170 | 171 | ``` 172 | ```js 173 | // client/index.js 174 | import '../imports/ui/components/test-element.html'; 175 | // include the webcomponents js file 176 | import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js"; 177 | 178 | //Remember to include a polymer component or polymer.html itself in any file 179 | 180 | import "../imports/ui/bower_components/polymer/polymer.html"; 181 | 182 | ``` 183 | Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time. Refer the [FAQ](#faq) 184 | 185 | A sample bower.json (imports/ui/bower.json) 186 | 187 | ```json 188 | { 189 | "dependencies": { 190 | "iron-pages": "PolymerElements/iron-pages#^1.0.0", 191 | "neon-animations": "PolymerElements/neon-animations#^1.0.0", 192 | "paper-button": "PolymerElements/paper-button#^1.0.5", 193 | "polymer": "Polymer/polymer#^1.0.0" 194 | }, 195 | "name": "mwc-synthesis", 196 | "version": "0.0.1" 197 | } 198 | ``` 199 | 200 | ### Using Polymer from npm instead of bower 201 | 202 | Here is a working demo of using npm polymer package instead of bower. 203 | 204 | https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo 205 | 206 | `npm install --save @polymer/paper-button` 207 | 208 | Before everything else load webcomponents and polymer 209 | 210 | ```js 211 | import "webcomponents.js/webcomponents-lite.min.js"; 212 | import "@polymer/polymer/polymer.html"; 213 | ``` 214 | 215 | Use it from js files as 216 | ```js 217 | import "@polymer/paper-button/paper-button.html"; 218 | ``` 219 | >Please note that the @polymer packages are still in testing stage. And the polymer version is an older one. 220 | 221 | ### Assets 222 | 223 | works inside html. 224 | 225 | ```html 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | ``` 238 | works inside css also. 239 | 240 | ```css 241 | 242 | /*imports/ui/path/to/element.html inside style tag or imports/ui/path/to/element.css */ 243 | background: url(path/to/image.png); /* Works!!. */ 244 | property: url(relative/path/to/image.png); /* Works!!. */ 245 | property: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */ 246 | /* if you want to use variables use 247 | --url-var = url(path/to/url); 248 | property: var(--url-var); 249 | */ 250 | property: url(/path/to/image.png); /* Works!!. if asset is in public folder */ 251 | ``` 252 | 253 | File types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19. 254 | 255 | Feel free to add pr's if you want to supports more file types. 256 | 257 | Relevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 . 258 | 259 | ### Demo 260 | 261 | #####Using Bower 262 | 263 | Check out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo) 264 | 265 | #####Using npm 266 | 267 | Check out the [synthesis-meteor-polymer-npm-demo](https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo) 268 | 269 | ### Kickstart Your Meteor Polymer projects 270 | [Kickstart a Meteor/Polymer project - FlowRouter](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis. 271 | 272 | [KickStart Meteor/Polymer Project - Polymer App Route](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route) 273 | 274 | ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif) 275 | 276 | ### Like it? 277 | 278 | :star: this repo 279 | 280 | ### Found a bug? 281 | 282 | Raise an issue! 283 | 284 | ### TODO 285 | 286 | ### Social 287 | 288 | Gitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 289 | 290 | Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536 291 | 292 | > NO NEED to use any VULCANIZING tools. Synthesis handles everything 293 | 294 | ### FAQ 295 | 296 | Q: When I tried to set `window.Polymer = {lazyRegister:true,dom:"shadow"}` it resulted in error. 297 | 298 | Ans : Refer [polymer settings](#polymer-settings) 299 | 300 | Q: When I added (a) bower component(s) build time became painstakingly high. 301 | 302 | Ans : The component(s) you've added might have many js files. meteor ecmascripts gets frozen/takes a long time when the number of js files are very high. Refer the issue https://github.com/meteor/meteor/issues/6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue. 303 | 304 | In console (pwd = /imports/ui) 305 | ```sh 306 | find bower_components -name \*.js | wc -l 307 | ``` 308 | Try to find out which package contains large number of js files. Delete unecessary files and keep a local copy. 309 | 310 | [bower-installer](https://github.com/blittle/bower-installer) can be used instead of bower to bring in just the files that you need for your project. Significantly lowers the build time. 311 | 312 | Q: Is it possible to use npm instead of bower for loading polymer and components 313 | 314 | Ans : Yes there is. Refer [using npm instead of bower](#using-polymer-from-npm-instead-of-bower) 315 | 316 | Q: Can I use Polymer and blaze together? 317 | 318 | Ans: You can. If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 319 | 320 | Use blaze.html extension for blaze files. 321 | 322 | But there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk 323 | 324 | Q: I love blaze's template level subscriptions and spacebars. I dont want to lose these features when I port my app to polymer. Any help? 325 | 326 | Ans : In my experience I find nothing that polymer cannot do which blaze can. Polymer is very easy to learn and while porting your app you'll find yourself copy pasting most of your code. For every blaze function they have solutions in polymer. We have got you covered when it comes to meteor data and subscriptions (including template level subs) Refer [mixin](https://github.com/meteorwebcomponents/mixin) . 327 | -------------------------------------------------------------------------------- /packages/synthesis-assets/README.md: -------------------------------------------------------------------------------- 1 | # Synthesis is meteor + polymer 2 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 3 | 4 | 5 | 6 | ## About 7 | 8 | Synthesis helps you use polymer inside meteor. 9 | 10 | ### Under the hood 11 | 12 | Synthesis uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. 13 | Does not use any regex to parse html. :) 14 | 15 | > A version that uses cheerio instead of parse ⇒ [synthesis-using-cheerio](https://github.com/meteorwebcomponents/synthesis/tree/cheerio). 16 | 17 | #####Main functions 18 | 19 | 1. Handles html link imports which polymer uses to add dependency files. 20 | 2. Handles external script files (script src) 21 | 3. Handles external css files (link rel stylesheet) 22 | 4. Handles template tags. 23 | 5. Removes comments and unecessary whitespaces. 24 | 5. Handles loading order of html and js inside the polymer files 25 | 4. Adds components to document during runtime. 26 | 27 | ## Installation 28 | 29 | Remove `blaze-html-templates` (or remove the html compiler you are using). 30 | 31 | `meteor remove blaze-html-templates` 32 | 33 | > If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 34 | 35 | Install synthesis 36 | 37 | ```sh 38 | meteor add mwc:synthesis #compiles html files 39 | # synthesis-assets is optional. If you want to handle relative asset paths. 40 | meteor add mwc:synthesis-assets #compiles assets for to work. 41 | ``` 42 | 43 | synthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler) 44 | 45 | You can optionally use these packages from meteorwebcomponents 46 | 47 | * [mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package. 48 | * [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer. 49 | * [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer. 50 | 51 | 52 | ## Usage 53 | 54 | ### Polymer Settings 55 | 56 | Create client/lib/settings.js 57 | 58 | Why lib directory ? Settings code should run before anything else. 59 | 60 | ```js 61 | /* client/lib/settings.js */ 62 | window.Polymer = { 63 | //dom: 'shadow', 64 | lazyRegister: true 65 | }; 66 | ``` 67 | ### App Structure 68 | 69 | Refer http://guide.meteor.com 70 | 71 | Application Structure http://guide.meteor.com/structure.html. 72 | 73 | Keep all your components in imports folder 74 | 75 | You can import html using 76 | 77 | 1. `import './component.html';` from js files 78 | 79 | 2. ` `from html files 80 | 81 | > Please note that `import 'package/package.html;'` imports from node_modules directory while `` is the same as `import "./package/package.html";`. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as ``. 82 | 83 | > If you want to import scripts/stylesheets/html from public use `src="/path/to/my/file"`. `src="path/to/my/file"` is interpreted as `import "./path/to/my/file"`. 84 | 85 | Script 86 | 87 | 1. ` ` 88 | 89 | 2. `` 90 | 91 | Css (its important follow these two methods to confine style inside the component.) 92 | 93 | 1. `` 94 | 95 | 2. `` 96 | 97 | Add bower_components to any folder inside imports directory. 98 | 99 | Assume bower directory is imports/ui/bower_components 100 | 101 | ```html 102 | 103 | 104 | 105 | 106 | 107 | 108 | 123 | 124 | 125 | ``` 126 | ```css 127 | /*imports/ui/component/test-element.css*/ 128 | paper-button{ 129 | color:red; 130 | } 131 | ``` 132 | ```js 133 | // imports/ui/component/test-element.js 134 | import './test-element.html'; 135 | 136 | Polymer({ 137 | is:"test-element", 138 | properties:{ 139 | name:{ 140 | type:String, 141 | value:"Arun Kumar" 142 | }, 143 | nickname:{ 144 | type:String, 145 | value:"tkay" 146 | }, 147 | nndHidden:{ 148 | type:Boolean, 149 | value:true 150 | } 151 | }, 152 | showNickName: function () { 153 | this.nndHidden = false; 154 | } 155 | }) 156 | 157 | 158 | ``` 159 | 160 | ```html 161 | 162 | 163 | Synthesis 164 | 165 | 166 | 167 | 168 |

Synthesis is Meteor + Polymer!

169 | 170 | 171 | ``` 172 | ```js 173 | // client/index.js 174 | import '../imports/ui/components/test-element.html'; 175 | // include the webcomponents js file 176 | import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js"; 177 | 178 | //Remember to include a polymer component or polymer.html itself in any file 179 | 180 | import "../imports/ui/bower_components/polymer/polymer.html"; 181 | 182 | ``` 183 | Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time. Refer the [FAQ](#faq) 184 | 185 | A sample bower.json (imports/ui/bower.json) 186 | 187 | ```json 188 | { 189 | "dependencies": { 190 | "iron-pages": "PolymerElements/iron-pages#^1.0.0", 191 | "neon-animations": "PolymerElements/neon-animations#^1.0.0", 192 | "paper-button": "PolymerElements/paper-button#^1.0.5", 193 | "polymer": "Polymer/polymer#^1.0.0" 194 | }, 195 | "name": "mwc-synthesis", 196 | "version": "0.0.1" 197 | } 198 | ``` 199 | 200 | ### Using Polymer from npm instead of bower 201 | 202 | Here is a working demo of using npm polymer package instead of bower. 203 | 204 | https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo 205 | 206 | `npm install --save @polymer/paper-button` 207 | 208 | Before everything else load webcomponents and polymer 209 | 210 | ```js 211 | import "webcomponents.js/webcomponents-lite.min.js"; 212 | import "@polymer/polymer/polymer.html"; 213 | ``` 214 | 215 | Use it from js files as 216 | ```js 217 | import "@polymer/paper-button/paper-button.html"; 218 | ``` 219 | >Please note that the @polymer packages are still in testing stage. And the polymer version is an older one. 220 | 221 | ### Assets 222 | 223 | works inside html. 224 | 225 | ```html 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | ``` 238 | works inside css also. 239 | 240 | ```css 241 | 242 | /*imports/ui/path/to/element.html inside style tag or imports/ui/path/to/element.css */ 243 | background: url(path/to/image.png); /* Works!!. */ 244 | property: url(relative/path/to/image.png); /* Works!!. */ 245 | property: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */ 246 | /* if you want to use variables use 247 | --url-var = url(path/to/url); 248 | property: var(--url-var); 249 | */ 250 | property: url(/path/to/image.png); /* Works!!. if asset is in public folder */ 251 | ``` 252 | 253 | File types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19. 254 | 255 | Feel free to add pr's if you want to supports more file types. 256 | 257 | Relevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 . 258 | 259 | ### Demo 260 | 261 | #####Using Bower 262 | 263 | Check out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo) 264 | 265 | #####Using npm 266 | 267 | Check out the [synthesis-meteor-polymer-npm-demo](https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo) 268 | 269 | ### Kickstart Your Meteor Polymer projects 270 | [Kickstart a Meteor/Polymer project - FlowRouter](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis. 271 | 272 | [KickStart Meteor/Polymer Project - Polymer App Route](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route) 273 | 274 | ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif) 275 | 276 | ### Like it? 277 | 278 | :star: this repo 279 | 280 | ### Found a bug? 281 | 282 | Raise an issue! 283 | 284 | ### TODO 285 | 286 | ### Social 287 | 288 | Gitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 289 | 290 | Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536 291 | 292 | > NO NEED to use any VULCANIZING tools. Synthesis handles everything 293 | 294 | ### FAQ 295 | 296 | Q: When I tried to set `window.Polymer = {lazyRegister:true,dom:"shadow"}` it resulted in error. 297 | 298 | Ans : Refer [polymer settings](#polymer-settings) 299 | 300 | Q: When I added (a) bower component(s) build time became painstakingly high. 301 | 302 | Ans : The component(s) you've added might have many js files. meteor ecmascripts gets frozen/takes a long time when the number of js files are very high. Refer the issue https://github.com/meteor/meteor/issues/6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue. 303 | 304 | In console (pwd = /imports/ui) 305 | ```sh 306 | find bower_components -name \*.js | wc -l 307 | ``` 308 | Try to find out which package contains large number of js files. Delete unecessary files and keep a local copy. 309 | 310 | [bower-installer](https://github.com/blittle/bower-installer) can be used instead of bower to bring in just the files that you need for your project. Significantly lowers the build time. 311 | 312 | Q: Is it possible to use npm instead of bower for loading polymer and components 313 | 314 | Ans : Yes there is. Refer [using npm instead of bower](#using-polymer-from-npm-instead-of-bower) 315 | 316 | Q: Can I use Polymer and blaze together? 317 | 318 | Ans: You can. If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 319 | 320 | Use blaze.html extension for blaze files. 321 | 322 | But there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk 323 | 324 | Q: I love blaze's template level subscriptions and spacebars. I dont want to lose these features when I port my app to polymer. Any help? 325 | 326 | Ans : In my experience I find nothing that polymer cannot do which blaze can. Polymer is very easy to learn and while porting your app you'll find yourself copy pasting most of your code. For every blaze function they have solutions in polymer. We have got you covered when it comes to meteor data and subscriptions (including template level subs) Refer [mixin](https://github.com/meteorwebcomponents/mixin) . 327 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/README.md: -------------------------------------------------------------------------------- 1 | # Synthesis is meteor + polymer 2 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/aruntk/meteorwebcomponents?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 3 | 4 | 5 | 6 | ## About 7 | 8 | Synthesis helps you use polymer inside meteor. 9 | 10 | ### Under the hood 11 | 12 | Synthesis uses [parse5](https://github.com/inikulin/parse5) which parses HTML the way the latest version of your browser does. 13 | Does not use any regex to parse html. :) 14 | 15 | > A version that uses cheerio instead of parse ⇒ [synthesis-using-cheerio](https://github.com/meteorwebcomponents/synthesis/tree/cheerio). 16 | 17 | #####Main functions 18 | 19 | 1. Handles html link imports which polymer uses to add dependency files. 20 | 2. Handles external script files (script src) 21 | 3. Handles external css files (link rel stylesheet) 22 | 4. Handles template tags. 23 | 5. Removes comments and unecessary whitespaces. 24 | 5. Handles loading order of html and js inside the polymer files 25 | 4. Adds components to document during runtime. 26 | 27 | ## Installation 28 | 29 | Remove `blaze-html-templates` (or remove the html compiler you are using). 30 | 31 | `meteor remove blaze-html-templates` 32 | 33 | > If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 34 | 35 | Install synthesis 36 | 37 | ```sh 38 | meteor add mwc:synthesis #compiles html files 39 | # synthesis-assets is optional. If you want to handle relative asset paths. 40 | meteor add mwc:synthesis-assets #compiles assets for to work. 41 | ``` 42 | 43 | synthesis is a meteor 1.3+ package. for 1.2 support use [mwc:compiler](https://github.com/meteorwebcomponents/compiler) 44 | 45 | You can optionally use these packages from meteorwebcomponents 46 | 47 | * [mwc:mixin](https://github.com/meteorwebcomponents/mixin) - Polymer data package. 48 | * [mwc:router](https://github.com/meteorwebcomponents/router) - Flowrouter with polymer. 49 | * [mwc:layout](https://github.com/meteorwebcomponents/layout) - Polymer layout renderer. 50 | 51 | 52 | ## Usage 53 | 54 | ### Polymer Settings 55 | 56 | Create client/lib/settings.js 57 | 58 | Why lib directory ? Settings code should run before anything else. 59 | 60 | ```js 61 | /* client/lib/settings.js */ 62 | window.Polymer = { 63 | //dom: 'shadow', 64 | lazyRegister: true 65 | }; 66 | ``` 67 | ### App Structure 68 | 69 | Refer http://guide.meteor.com 70 | 71 | Application Structure http://guide.meteor.com/structure.html. 72 | 73 | Keep all your components in imports folder 74 | 75 | You can import html using 76 | 77 | 1. `import './component.html';` from js files 78 | 79 | 2. ` `from html files 80 | 81 | > Please note that `import 'package/package.html;'` imports from node_modules directory while `` is the same as `import "./package/package.html";`. This is kept like this to go through polymer components in which dependency files inside the same folder are imported as ``. 82 | 83 | > If you want to import scripts/stylesheets/html from public use `src="/path/to/my/file"`. `src="path/to/my/file"` is interpreted as `import "./path/to/my/file"`. 84 | 85 | Script 86 | 87 | 1. ` ` 88 | 89 | 2. `` 90 | 91 | Css (its important follow these two methods to confine style inside the component.) 92 | 93 | 1. `` 94 | 95 | 2. `` 96 | 97 | Add bower_components to any folder inside imports directory. 98 | 99 | Assume bower directory is imports/ui/bower_components 100 | 101 | ```html 102 | 103 | 104 | 105 | 106 | 107 | 108 | 123 | 124 | 125 | ``` 126 | ```css 127 | /*imports/ui/component/test-element.css*/ 128 | paper-button{ 129 | color:red; 130 | } 131 | ``` 132 | ```js 133 | // imports/ui/component/test-element.js 134 | import './test-element.html'; 135 | 136 | Polymer({ 137 | is:"test-element", 138 | properties:{ 139 | name:{ 140 | type:String, 141 | value:"Arun Kumar" 142 | }, 143 | nickname:{ 144 | type:String, 145 | value:"tkay" 146 | }, 147 | nndHidden:{ 148 | type:Boolean, 149 | value:true 150 | } 151 | }, 152 | showNickName: function () { 153 | this.nndHidden = false; 154 | } 155 | }) 156 | 157 | 158 | ``` 159 | 160 | ```html 161 | 162 | 163 | Synthesis 164 | 165 | 166 | 167 | 168 |

Synthesis is Meteor + Polymer!

169 | 170 | 171 | ``` 172 | ```js 173 | // client/index.js 174 | import '../imports/ui/components/test-element.html'; 175 | // include the webcomponents js file 176 | import "../imports/ui/bower_components/webcomponentsjs/webcomponents-lite.min.js"; 177 | 178 | //Remember to include a polymer component or polymer.html itself in any file 179 | 180 | import "../imports/ui/bower_components/polymer/polymer.html"; 181 | 182 | ``` 183 | Best practice is to reduce the number of files in the imports directory. Avoid adding unecessary components, helps in lowering the build time. Refer the [FAQ](#faq) 184 | 185 | A sample bower.json (imports/ui/bower.json) 186 | 187 | ```json 188 | { 189 | "dependencies": { 190 | "iron-pages": "PolymerElements/iron-pages#^1.0.0", 191 | "neon-animations": "PolymerElements/neon-animations#^1.0.0", 192 | "paper-button": "PolymerElements/paper-button#^1.0.5", 193 | "polymer": "Polymer/polymer#^1.0.0" 194 | }, 195 | "name": "mwc-synthesis", 196 | "version": "0.0.1" 197 | } 198 | ``` 199 | 200 | ### Using Polymer from npm instead of bower 201 | 202 | Here is a working demo of using npm polymer package instead of bower. 203 | 204 | https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo 205 | 206 | `npm install --save @polymer/paper-button` 207 | 208 | Before everything else load webcomponents and polymer 209 | 210 | ```js 211 | import "webcomponents.js/webcomponents-lite.min.js"; 212 | import "@polymer/polymer/polymer.html"; 213 | ``` 214 | 215 | Use it from js files as 216 | ```js 217 | import "@polymer/paper-button/paper-button.html"; 218 | ``` 219 | >Please note that the @polymer packages are still in testing stage. And the polymer version is an older one. 220 | 221 | ### Assets 222 | 223 | works inside html. 224 | 225 | ```html 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | ``` 238 | works inside css also. 239 | 240 | ```css 241 | 242 | /*imports/ui/path/to/element.html inside style tag or imports/ui/path/to/element.css */ 243 | background: url(path/to/image.png); /* Works!!. */ 244 | property: url(relative/path/to/image.png); /* Works!!. */ 245 | property: url(var(--url-var)); /* Does not work unless --url-var = absolute path imports/ui/path/to/image.png */ 246 | /* if you want to use variables use 247 | --url-var = url(path/to/url); 248 | property: var(--url-var); 249 | */ 250 | property: url(/path/to/image.png); /* Works!!. if asset is in public folder */ 251 | ``` 252 | 253 | File types we supports https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-assets/plugin/synthesis-assets.js#L19. 254 | 255 | Feel free to add pr's if you want to supports more file types. 256 | 257 | Relevant code https://github.com/meteorwebcomponents/synthesis/blob/master/packages/synthesis-compiler/synthesis-compiler.js#L166-L176 . 258 | 259 | ### Demo 260 | 261 | #####Using Bower 262 | 263 | Check out the [Synthesis Demo](https://github.com/meteorwebcomponents/synthesis-demo) 264 | 265 | #####Using npm 266 | 267 | Check out the [synthesis-meteor-polymer-npm-demo](https://github.com/meteorwebcomponents/synthesis-meteor-polymer-npm-demo) 268 | 269 | ### Kickstart Your Meteor Polymer projects 270 | [Kickstart a Meteor/Polymer project - FlowRouter](https://github.com/aruntk/kickstart-meteor-polymer) with Synthesis. 271 | 272 | [KickStart Meteor/Polymer Project - Polymer App Route](https://github.com/aruntk/kickstart-meteor-polymer-with-app-route) 273 | 274 | ![synthesis1](https://cloud.githubusercontent.com/assets/6007432/14216652/9da7131a-f867-11e5-9f84-6dd75d60dd45.gif) 275 | 276 | ### Like it? 277 | 278 | :star: this repo 279 | 280 | ### Found a bug? 281 | 282 | Raise an issue! 283 | 284 | ### TODO 285 | 286 | ### Social 287 | 288 | Gitter - [meteorwebcomponents](https://gitter.im/aruntk/meteorwebcomponents?utm_source=share-link&utm_medium=link&utm_campaign=share-link) 289 | 290 | Meteor forum - https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536 291 | 292 | > NO NEED to use any VULCANIZING tools. Synthesis handles everything 293 | 294 | ### FAQ 295 | 296 | Q: When I tried to set `window.Polymer = {lazyRegister:true,dom:"shadow"}` it resulted in error. 297 | 298 | Ans : Refer [polymer settings](#polymer-settings) 299 | 300 | Q: When I added (a) bower component(s) build time became painstakingly high. 301 | 302 | Ans : The component(s) you've added might have many js files. meteor ecmascripts gets frozen/takes a long time when the number of js files are very high. Refer the issue https://github.com/meteor/meteor/issues/6859. In my testings with 300 html files synthesis ran pretty fast. Its the meteor js handlers which create this issue. 303 | 304 | In console (pwd = /imports/ui) 305 | ```sh 306 | find bower_components -name \*.js | wc -l 307 | ``` 308 | Try to find out which package contains large number of js files. Delete unecessary files and keep a local copy. 309 | 310 | [bower-installer](https://github.com/blittle/bower-installer) can be used instead of bower to bring in just the files that you need for your project. Significantly lowers the build time. 311 | 312 | Q: Is it possible to use npm instead of bower for loading polymer and components 313 | 314 | Ans : Yes there is. Refer [using npm instead of bower](#using-polymer-from-npm-instead-of-bower) 315 | 316 | Q: Can I use Polymer and blaze together? 317 | 318 | Ans: You can. If you want to use blaze along with synthesis use **[mwc:blaze-html-templating](https://github.com/meteorwebcomponents/blaze-html-templates)** . demo - [blaze+polymer](https://github.com/meteorwebcomponents/synthesis-demo/tree/blaze-polymer) 319 | 320 | Use blaze.html extension for blaze files. 321 | 322 | But there are some compatibility issues https://forums.meteor.com/t/polymer-meteor-support-with-meteor-webcomponents-packages/20536/30?u=aruntk 323 | 324 | Q: I love blaze's template level subscriptions and spacebars. I dont want to lose these features when I port my app to polymer. Any help? 325 | 326 | Ans : In my experience I find nothing that polymer cannot do which blaze can. Polymer is very easy to learn and while porting your app you'll find yourself copy pasting most of your code. For every blaze function they have solutions in polymer. We have got you covered when it comes to meteor data and subscriptions (including template level subs) Refer [mixin](https://github.com/meteorwebcomponents/mixin) . 327 | -------------------------------------------------------------------------------- /packages/synthesis-compiler/.npm/package/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1, 3 | "dependencies": { 4 | "@types/clone": { 5 | "version": "0.1.30", 6 | "resolved": "https://registry.npmjs.org/@types/clone/-/clone-0.1.30.tgz", 7 | "integrity": "sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=" 8 | }, 9 | "@types/node": { 10 | "version": "4.2.23", 11 | "resolved": "https://registry.npmjs.org/@types/node/-/node-4.2.23.tgz", 12 | "integrity": "sha512-U6IchCNLRyswc9p6G6lxWlbE+KwAhZp6mGo6MD2yWpmFomhYmetK+c98OpKyvphNn04CU3aXeJrXdOqbXVTS/w==" 13 | }, 14 | "@types/parse5": { 15 | "version": "0.0.31", 16 | "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-0.0.31.tgz", 17 | "integrity": "sha1-6Cekk6RDsVbhtYKi5MO9wAQPLuc=", 18 | "dependencies": { 19 | "@types/node": { 20 | "version": "6.0.94", 21 | "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.94.tgz", 22 | "integrity": "sha512-CwopBfOTONzc1bDDTh8/KzW+zssiIPw+nSf27Y1cuGIkZJ7zuhkig6xO5p9pBW/RY99DznOMCIj+FXx8EIy+qw==" 23 | } 24 | } 25 | }, 26 | "align-text": { 27 | "version": "0.1.4", 28 | "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", 29 | "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", 30 | "dependencies": { 31 | "kind-of": { 32 | "version": "3.2.2", 33 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", 34 | "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=" 35 | } 36 | } 37 | }, 38 | "ansi-cyan": { 39 | "version": "0.1.1", 40 | "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz", 41 | "integrity": "sha1-U4rlKK+JgvKK4w2G8vF0VtJgmHM=" 42 | }, 43 | "ansi-red": { 44 | "version": "0.1.1", 45 | "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz", 46 | "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=" 47 | }, 48 | "ansi-wrap": { 49 | "version": "0.1.0", 50 | "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz", 51 | "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768=" 52 | }, 53 | "arr-diff": { 54 | "version": "1.1.0", 55 | "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz", 56 | "integrity": "sha1-aHwydYFjWI/vfeezb6vklesaOZo=" 57 | }, 58 | "arr-flatten": { 59 | "version": "1.1.0", 60 | "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", 61 | "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==" 62 | }, 63 | "arr-union": { 64 | "version": "2.1.0", 65 | "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz", 66 | "integrity": "sha1-IPnqtexw9cfSFbEHexw5Fh0pLH0=" 67 | }, 68 | "array-slice": { 69 | "version": "0.2.3", 70 | "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz", 71 | "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=" 72 | }, 73 | "camelcase": { 74 | "version": "1.2.1", 75 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", 76 | "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=" 77 | }, 78 | "center-align": { 79 | "version": "0.1.3", 80 | "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", 81 | "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=" 82 | }, 83 | "cliui": { 84 | "version": "2.1.0", 85 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", 86 | "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=", 87 | "dependencies": { 88 | "wordwrap": { 89 | "version": "0.0.2", 90 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", 91 | "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=" 92 | } 93 | } 94 | }, 95 | "clone": { 96 | "version": "1.0.3", 97 | "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.3.tgz", 98 | "integrity": "sha1-KY1+IjFmD0DAA8LtMUDezz9TCF8=" 99 | }, 100 | "core-util-is": { 101 | "version": "1.0.2", 102 | "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", 103 | "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" 104 | }, 105 | "decamelize": { 106 | "version": "1.2.0", 107 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", 108 | "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" 109 | }, 110 | "deep-is": { 111 | "version": "0.1.3", 112 | "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", 113 | "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" 114 | }, 115 | "dom5": { 116 | "version": "1.3.6", 117 | "resolved": "https://registry.npmjs.org/dom5/-/dom5-1.3.6.tgz", 118 | "integrity": "sha1-pwiKn8XzsI3J9u2kx6uuskGUXg0=", 119 | "dependencies": { 120 | "parse5": { 121 | "version": "1.5.1", 122 | "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", 123 | "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=" 124 | } 125 | } 126 | }, 127 | "escodegen": { 128 | "version": "1.9.0", 129 | "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.0.tgz", 130 | "integrity": "sha512-v0MYvNQ32bzwoG2OSFzWAkuahDQHK92JBN0pTAALJ4RIxEZe766QJPDR8Hqy7XNUy5K3fnVL76OqYAdc4TZEIw==", 131 | "dependencies": { 132 | "esprima": { 133 | "version": "3.1.3", 134 | "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", 135 | "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=" 136 | } 137 | } 138 | }, 139 | "espree": { 140 | "version": "2.2.5", 141 | "resolved": "https://registry.npmjs.org/espree/-/espree-2.2.5.tgz", 142 | "integrity": "sha1-32kbkxCIlAKuspzAZnCMVmkLhUs=" 143 | }, 144 | "estraverse": { 145 | "version": "4.2.0", 146 | "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz", 147 | "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=" 148 | }, 149 | "esutils": { 150 | "version": "2.0.2", 151 | "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", 152 | "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" 153 | }, 154 | "extend-shallow": { 155 | "version": "1.1.4", 156 | "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz", 157 | "integrity": "sha1-Gda/lN/AnXa6cR85uHLSH/TdkHE=" 158 | }, 159 | "fast-levenshtein": { 160 | "version": "2.0.6", 161 | "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", 162 | "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" 163 | }, 164 | "inherits": { 165 | "version": "2.0.3", 166 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 167 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 168 | }, 169 | "is-buffer": { 170 | "version": "1.1.6", 171 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", 172 | "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" 173 | }, 174 | "isarray": { 175 | "version": "1.0.0", 176 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", 177 | "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" 178 | }, 179 | "kind-of": { 180 | "version": "1.1.0", 181 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz", 182 | "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ=" 183 | }, 184 | "lazy-cache": { 185 | "version": "1.0.4", 186 | "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", 187 | "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=" 188 | }, 189 | "levn": { 190 | "version": "0.3.0", 191 | "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", 192 | "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=" 193 | }, 194 | "lodash": { 195 | "version": "4.17.4", 196 | "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz", 197 | "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=" 198 | }, 199 | "longest": { 200 | "version": "1.0.1", 201 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", 202 | "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=" 203 | }, 204 | "optionator": { 205 | "version": "0.8.2", 206 | "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", 207 | "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=" 208 | }, 209 | "parse5": { 210 | "version": "3.0.3", 211 | "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", 212 | "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==" 213 | }, 214 | "plugin-error": { 215 | "version": "0.1.2", 216 | "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz", 217 | "integrity": "sha1-O5uzM1zPAPQl4HQ34ZJ2ln2kes4=" 218 | }, 219 | "polyclean": { 220 | "version": "1.3.1", 221 | "resolved": "https://registry.npmjs.org/polyclean/-/polyclean-1.3.1.tgz", 222 | "integrity": "sha1-dMLizPrYs41UzviLF7AxLM3iPhY=" 223 | }, 224 | "prelude-ls": { 225 | "version": "1.1.2", 226 | "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", 227 | "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=" 228 | }, 229 | "process-nextick-args": { 230 | "version": "1.0.7", 231 | "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz", 232 | "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=" 233 | }, 234 | "readable-stream": { 235 | "version": "2.3.3", 236 | "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", 237 | "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==" 238 | }, 239 | "repeat-string": { 240 | "version": "1.6.1", 241 | "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", 242 | "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=" 243 | }, 244 | "right-align": { 245 | "version": "0.1.3", 246 | "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", 247 | "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=" 248 | }, 249 | "safe-buffer": { 250 | "version": "5.1.1", 251 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 252 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 253 | }, 254 | "source-map": { 255 | "version": "0.5.7", 256 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", 257 | "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" 258 | }, 259 | "string_decoder": { 260 | "version": "1.0.3", 261 | "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", 262 | "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==" 263 | }, 264 | "through2": { 265 | "version": "2.0.3", 266 | "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", 267 | "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=" 268 | }, 269 | "type-check": { 270 | "version": "0.3.2", 271 | "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", 272 | "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=" 273 | }, 274 | "uglify-js": { 275 | "version": "2.8.29", 276 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz", 277 | "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=" 278 | }, 279 | "uglify-to-browserify": { 280 | "version": "1.0.2", 281 | "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", 282 | "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=" 283 | }, 284 | "util-deprecate": { 285 | "version": "1.0.2", 286 | "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", 287 | "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" 288 | }, 289 | "window-size": { 290 | "version": "0.1.0", 291 | "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", 292 | "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=" 293 | }, 294 | "wordwrap": { 295 | "version": "1.0.0", 296 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", 297 | "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=" 298 | }, 299 | "xtend": { 300 | "version": "4.0.1", 301 | "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", 302 | "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" 303 | }, 304 | "yargs": { 305 | "version": "3.10.0", 306 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", 307 | "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=" 308 | } 309 | } 310 | } 311 | -------------------------------------------------------------------------------- /packages/synthesis-pug/.npm/plugin/synthesis-jade/npm-shrinkwrap.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "jade": { 4 | "version": "1.11.0", 5 | "resolved": "https://registry.npmjs.org/jade/-/jade-1.11.0.tgz", 6 | "from": "jade@1.11.0", 7 | "dependencies": { 8 | "character-parser": { 9 | "version": "1.2.1", 10 | "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-1.2.1.tgz", 11 | "from": "character-parser@1.2.1" 12 | }, 13 | "clean-css": { 14 | "version": "3.4.16", 15 | "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.16.tgz", 16 | "from": "clean-css@>=3.1.9 <4.0.0", 17 | "dependencies": { 18 | "commander": { 19 | "version": "2.8.1", 20 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz", 21 | "from": "commander@>=2.8.0 <2.9.0", 22 | "dependencies": { 23 | "graceful-readlink": { 24 | "version": "1.0.1", 25 | "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", 26 | "from": "graceful-readlink@>=1.0.0" 27 | } 28 | } 29 | }, 30 | "source-map": { 31 | "version": "0.4.4", 32 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", 33 | "from": "source-map@>=0.4.0 <0.5.0", 34 | "dependencies": { 35 | "amdefine": { 36 | "version": "1.0.0", 37 | "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.0.tgz", 38 | "from": "amdefine@>=0.0.4" 39 | } 40 | } 41 | } 42 | } 43 | }, 44 | "commander": { 45 | "version": "2.6.0", 46 | "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz", 47 | "from": "commander@>=2.6.0 <2.7.0" 48 | }, 49 | "constantinople": { 50 | "version": "3.0.2", 51 | "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.0.2.tgz", 52 | "from": "constantinople@>=3.0.1 <3.1.0", 53 | "dependencies": { 54 | "acorn": { 55 | "version": "2.7.0", 56 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz", 57 | "from": "acorn@>=2.1.0 <3.0.0" 58 | } 59 | } 60 | }, 61 | "jstransformer": { 62 | "version": "0.0.2", 63 | "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz", 64 | "from": "jstransformer@0.0.2", 65 | "dependencies": { 66 | "is-promise": { 67 | "version": "2.1.0", 68 | "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", 69 | "from": "is-promise@>=2.0.0 <3.0.0" 70 | }, 71 | "promise": { 72 | "version": "6.1.0", 73 | "resolved": "https://registry.npmjs.org/promise/-/promise-6.1.0.tgz", 74 | "from": "promise@>=6.0.1 <7.0.0", 75 | "dependencies": { 76 | "asap": { 77 | "version": "1.0.0", 78 | "resolved": "https://registry.npmjs.org/asap/-/asap-1.0.0.tgz", 79 | "from": "asap@>=1.0.0 <1.1.0" 80 | } 81 | } 82 | } 83 | } 84 | }, 85 | "mkdirp": { 86 | "version": "0.5.1", 87 | "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", 88 | "from": "mkdirp@>=0.5.0 <0.6.0", 89 | "dependencies": { 90 | "minimist": { 91 | "version": "0.0.8", 92 | "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", 93 | "from": "minimist@0.0.8" 94 | } 95 | } 96 | }, 97 | "transformers": { 98 | "version": "2.1.0", 99 | "resolved": "https://registry.npmjs.org/transformers/-/transformers-2.1.0.tgz", 100 | "from": "transformers@2.1.0", 101 | "dependencies": { 102 | "css": { 103 | "version": "1.0.8", 104 | "resolved": "https://registry.npmjs.org/css/-/css-1.0.8.tgz", 105 | "from": "css@>=1.0.8 <1.1.0", 106 | "dependencies": { 107 | "css-parse": { 108 | "version": "1.0.4", 109 | "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.0.4.tgz", 110 | "from": "css-parse@1.0.4" 111 | }, 112 | "css-stringify": { 113 | "version": "1.0.5", 114 | "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-1.0.5.tgz", 115 | "from": "css-stringify@1.0.5" 116 | } 117 | } 118 | }, 119 | "promise": { 120 | "version": "2.0.0", 121 | "resolved": "https://registry.npmjs.org/promise/-/promise-2.0.0.tgz", 122 | "from": "promise@>=2.0.0 <2.1.0", 123 | "dependencies": { 124 | "is-promise": { 125 | "version": "1.0.1", 126 | "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-1.0.1.tgz", 127 | "from": "is-promise@>=1.0.0 <2.0.0" 128 | } 129 | } 130 | }, 131 | "uglify-js": { 132 | "version": "2.2.5", 133 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.2.5.tgz", 134 | "from": "uglify-js@>=2.2.5 <2.3.0", 135 | "dependencies": { 136 | "optimist": { 137 | "version": "0.3.7", 138 | "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz", 139 | "from": "optimist@>=0.3.5 <0.4.0", 140 | "dependencies": { 141 | "wordwrap": { 142 | "version": "0.0.3", 143 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", 144 | "from": "wordwrap@>=0.0.2 <0.1.0" 145 | } 146 | } 147 | }, 148 | "source-map": { 149 | "version": "0.1.43", 150 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz", 151 | "from": "source-map@>=0.1.7 <0.2.0", 152 | "dependencies": { 153 | "amdefine": { 154 | "version": "1.0.0", 155 | "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.0.tgz", 156 | "from": "amdefine@>=0.0.4" 157 | } 158 | } 159 | } 160 | } 161 | } 162 | } 163 | }, 164 | "uglify-js": { 165 | "version": "2.6.2", 166 | "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.6.2.tgz", 167 | "from": "uglify-js@>=2.4.19 <3.0.0", 168 | "dependencies": { 169 | "async": { 170 | "version": "0.2.10", 171 | "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz", 172 | "from": "async@>=0.2.6 <0.3.0" 173 | }, 174 | "source-map": { 175 | "version": "0.5.6", 176 | "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", 177 | "from": "source-map@>=0.5.1 <0.6.0" 178 | }, 179 | "uglify-to-browserify": { 180 | "version": "1.0.2", 181 | "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", 182 | "from": "uglify-to-browserify@>=1.0.0 <1.1.0" 183 | }, 184 | "yargs": { 185 | "version": "3.10.0", 186 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz", 187 | "from": "yargs@>=3.10.0 <3.11.0", 188 | "dependencies": { 189 | "camelcase": { 190 | "version": "1.2.1", 191 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz", 192 | "from": "camelcase@>=1.0.2 <2.0.0" 193 | }, 194 | "cliui": { 195 | "version": "2.1.0", 196 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", 197 | "from": "cliui@>=2.1.0 <3.0.0", 198 | "dependencies": { 199 | "center-align": { 200 | "version": "0.1.3", 201 | "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz", 202 | "from": "center-align@>=0.1.1 <0.2.0", 203 | "dependencies": { 204 | "align-text": { 205 | "version": "0.1.4", 206 | "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", 207 | "from": "align-text@>=0.1.1 <0.2.0", 208 | "dependencies": { 209 | "kind-of": { 210 | "version": "3.0.3", 211 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.0.3.tgz", 212 | "from": "kind-of@>=3.0.2 <4.0.0", 213 | "dependencies": { 214 | "is-buffer": { 215 | "version": "1.1.3", 216 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.3.tgz", 217 | "from": "is-buffer@>=1.0.2 <2.0.0" 218 | } 219 | } 220 | }, 221 | "longest": { 222 | "version": "1.0.1", 223 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", 224 | "from": "longest@>=1.0.1 <2.0.0" 225 | }, 226 | "repeat-string": { 227 | "version": "1.5.4", 228 | "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.4.tgz", 229 | "from": "repeat-string@>=1.5.2 <2.0.0" 230 | } 231 | } 232 | }, 233 | "lazy-cache": { 234 | "version": "1.0.4", 235 | "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", 236 | "from": "lazy-cache@>=1.0.3 <2.0.0" 237 | } 238 | } 239 | }, 240 | "right-align": { 241 | "version": "0.1.3", 242 | "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", 243 | "from": "right-align@>=0.1.1 <0.2.0", 244 | "dependencies": { 245 | "align-text": { 246 | "version": "0.1.4", 247 | "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", 248 | "from": "align-text@>=0.1.1 <0.2.0", 249 | "dependencies": { 250 | "kind-of": { 251 | "version": "3.0.3", 252 | "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.0.3.tgz", 253 | "from": "kind-of@>=3.0.2 <4.0.0", 254 | "dependencies": { 255 | "is-buffer": { 256 | "version": "1.1.3", 257 | "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.3.tgz", 258 | "from": "is-buffer@>=1.0.2 <2.0.0" 259 | } 260 | } 261 | }, 262 | "longest": { 263 | "version": "1.0.1", 264 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", 265 | "from": "longest@>=1.0.1 <2.0.0" 266 | }, 267 | "repeat-string": { 268 | "version": "1.5.4", 269 | "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.5.4.tgz", 270 | "from": "repeat-string@>=1.5.2 <2.0.0" 271 | } 272 | } 273 | } 274 | } 275 | }, 276 | "wordwrap": { 277 | "version": "0.0.2", 278 | "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz", 279 | "from": "wordwrap@0.0.2" 280 | } 281 | } 282 | }, 283 | "decamelize": { 284 | "version": "1.2.0", 285 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", 286 | "from": "decamelize@>=1.0.0 <2.0.0" 287 | }, 288 | "window-size": { 289 | "version": "0.1.0", 290 | "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz", 291 | "from": "window-size@0.1.0" 292 | } 293 | } 294 | } 295 | } 296 | }, 297 | "void-elements": { 298 | "version": "2.0.1", 299 | "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", 300 | "from": "void-elements@>=2.0.1 <2.1.0" 301 | }, 302 | "with": { 303 | "version": "4.0.3", 304 | "resolved": "https://registry.npmjs.org/with/-/with-4.0.3.tgz", 305 | "from": "with@>=4.0.0 <4.1.0", 306 | "dependencies": { 307 | "acorn": { 308 | "version": "1.2.2", 309 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz", 310 | "from": "acorn@>=1.0.1 <2.0.0" 311 | }, 312 | "acorn-globals": { 313 | "version": "1.0.9", 314 | "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz", 315 | "from": "acorn-globals@>=1.0.3 <2.0.0", 316 | "dependencies": { 317 | "acorn": { 318 | "version": "2.7.0", 319 | "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz", 320 | "from": "acorn@>=2.1.0 <3.0.0" 321 | } 322 | } 323 | } 324 | } 325 | } 326 | } 327 | } 328 | } 329 | } 330 | --------------------------------------------------------------------------------