error: Failed to load brunch config - Unexpected identifier

[pyladune]

I have it correctly declared in package Json and I use below config.

All my polymer components are for now stored in web/static/assets/bower_componenents so they are copied by brunch extensively to priv/static/bower_components. Obviousely this is bad, So i am expecting polymer-brunch to avoid that + having all in a js file as per i understood from your notes

Thanks

exports.config = { // See http://brunch.io/#documentation for docs. files: { javascripts: { joinTo: "js/app.js" }, stylesheets: { joinTo: "css/app.css", order: { after: ["web/static/css/app.css"] // concat app.css last } }, templates: { joinTo: "js/app.js" } },

conventions: { assets: /^(web\/static\/assets)/ },

// Phoenix paths configuration paths: { // Dependencies and current project directories to watch watched: [ "web/static", "test/static" ],

// Where to compile files to
public: "priv/static"

},

// Configure your plugins plugins: { babel: { // Do not use ES6 compiler in vendor code ignore: [/web\/static\/vendor/] }, polymer: { vulcanize: { // A top-level vulcanize is the 'default' path for files that do not match any in 'paths'. options: { // These are normal vulcanize options passed as-is. abspath: "web/static", stripComments: true } }, crisper: { // A top-level crisper is the 'default' path for files that do not match any in 'paths' disabled: false, // If true then the vulcanized file is not split. options: {}, // These are normal crisper options passed as-is. }, paths: { // The key is matched to the end of the path, if this file in the key // is being compiled now then the global culvanize and crisper are not // not used at all. This can also be a regex matcher. "somefile.polymer" : { vulcanize: {} // Specifies vulcanize's options, the global version is unused // If one is undefined, like crisper here, then it has no settings // used, not even the global will be used, this is fully distinct. } } copyPathsToPublic: { // A set of paths to copy. paths: { "bower_components": [ // Place in 'public' to copy to "web/static/bower_components" // List of files to copy from, if this is a directory then copy all // the files in the directory, not the directory itself. ] }, // verbosity: If 0 then no logging, if 1 then single line summary, if 2 // then summary per directory recursed into, if 3 then each and every // file that is copied is printed. verbosity: 1, // onlyChanged: If true then compares timestamps before copying, this is // only useful when 'watch' is used, it will always copy files // regardless when just doing a normal build. onlyChanged: true } }
},

modules: { autoRequire: { "js/app.js": ["web/static/js/app"] } },

npm: { enabled: true, // Whitelist the npm deps to be pulled in as front-end assets. // All other deps in package.json will be excluded from the bundle. whitelist: ["phoenix", "phoenix_html"] } };

[OvermindDL1]

error: Failed to load brunch config - Unexpected identifier

That just means your brunch file has wrong syntax. :-) The brunch config is just normal javascript so be sure that it follows that, plus you should get a line number near where the issue is, or you can run the file through a javascript linter and it will tell you. :-)

Definitely not related to polymer-brunch though, just javascript. ^.^ So closing, but feel free to keep asking questions here. The format you posted the file above is broken up (should be surrounded on top and bottom be ```).

My javascript linter, of what I was able to grab above, says an error on line 61, the line right before copyPathsToPublic, missing a comma. Remember, normal javascript. :-)

[pyladune]

ahhh it is because the comma is missing in your sample from the readme page. However i should not copy/paste missing comma :-) !!

However i still miss something stupid i guess.

1. i moved bower_components from web/static/assets to web/static to avoid brunch to copy it anyway
2. compilation runs fine
3. a bower_components is created inside priv/static. Is that normal ? because I still have 105 request on my main page.

Thanks for help, it is really appreciated

[info] Running Inilab.Endpoint with Cowboy using http://localhost:5000 11 Feb 17:03:26 - info: compiling 11 Feb 17:03:32 - info: compiling. 11 Feb 17:03:33 - info: compiled 26 files into 2 files, copied 10 in 11 sec [polymer] copied 1071 files Setting up watches. Beware: since -r was given, this may take a while! Watches established.

[OvermindDL1]

Hah, my missing comma. ^.^

1 As long as bower is told where that goes and you reference it properly (normal javascript ways), all good.

3 That is fine, brunch makes a directory for each it encounters, even if empty. If 105 requests make sure the output is fine and brunch is concatting it. I can grab the actual brunch config from work when I next get a chance if you want it?

[pyladune]

yep would like to get the brunch config

No errors here files copied but it seems vulcanize does not do the job .-(. Should brunch produce a specfic unic file ?

beside i'm trying to find people willing to help to port https://github.com/kenny-hibino/stories to phoenix. then if possible moving from BS to polymer.

On 11. 02. 17 18:24, OvermindDL1 wrote:

Hah, my missing comma. ^.^

1 As long as bower is told where that goes and you reference it properly (normal javascript ways), all good.

3 That is fine, brunch makes a directory for each it encounters, even if empty. If 105 requests make sure the output is fine and brunch is concatting it. I can grab the actual brunch config from work when I next get a chance if you want it?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/OvermindDL1/polymer-brunch/issues/3#issuecomment-279161348, or mute the thread https://github.com/notifications/unsubscribe-auth/AB90fifuDIMzA5j1bkwtnp0GtgMOVZ5nks5rbe7kgaJpZM4L-Ic4.

[OvermindDL1]

yep would like to get the brunch config

@pyladune Here is my plugins ection from my brunch file:

    polymer: {
      vulcanize: {
        options: {
          abspath: 'web/static',
          inlineScripts: true,
          inlineCss: true,
          stripComments: true
          // excludes: [ // Windows Vulcanize support for excludes is borked, doubles the path from volume root...
          //   "web/static/webcomponents/_polymer/polymer/polymer.html"
          //   // /.*_polymer\/polymer\/polymer[-micron]*\.html/
          // ]
        }
      },
      crisper: {
        disabled: true
      },
      paths: {
        'global.polymer': {
          vulcanize: {
            options: {
              abspath: 'web/static',
              inlineScripts: true,
              inlineCss: true,
              stripComments: true
              // excludes: [ // Windows Vulcanize support for excludes is borked, doubles the path from volume root...
              //   "web/static/webcomponents/_polymer/polymer/polymer.html"
              //   // /.*_polymer\/polymer\/polymer[-micron]*\.html/
              // ]
            }
          },
          crisper: {
            disabled: false
          }
        }
      },

Basically I have a global.polymer file, it is full of the actual act of grabbing polymer and of the usual components that can be used by anything (but should not be duplicated), with crisper enabled on it so the javascript gets split off and built with brunch.

I also have a polymer file for each 'section' on the website, so say for a messaging page I have a messenger.polymer file that just imports all the messenger related things.

On the SPA page that Phoenix sends it imports the global html file first then loads the javascript async with a callback to know when done, this is done this way from a phoenix template:

    <link rel="import" href="<%= static_path(@conn, "/webcomponents/global.html") %>">
    <script>
    window.addEventListener('HTMLImportsLoaded', function () {
      setTimeout(function () {
        require('web/static/webcomponents/global.polymer')
      }, 0)
    })
    </script>

This way I make sure not to require in the global javascript part until the import is done. My main app file also loads the webcomponents polyfill (which is what send the HTMLImportsLoaded event).

The main SPA page also sets up a phoenix socket and asks for the view that should be shown based on the URL, the servers sends back an object of the element to display and files to import, the SPA page first imports the files (while showing a loading indicator on the site) and when the import callback is called it removes the loading indicator and dynamically creates that element (passing it some useful things like the phoenix socket and so forth), so I have a completely server-side driven page that I can update dynamically if want. :-)

beside i'm trying to find people willing to help to port https://github.com/kenny-hibino/stories to phoenix. then if possible moving from BS to polymer.

For note, BS works fine with polymer, I use BS with polymer. :-)

[pyladune]

Thanks !!

However i turn crazy with this :-) I can not figure out why i still have to load all polymer html one one one even after brunch compilaiton...which makes a ugly response time.

Could I share with you an access to our git just to have a very quick look in this config file and perhaps find the small thing i miss ?

Also what is the purpose to have polymer + BS in the same project ? Can't we do all what BS do with polymer only ?

Thanks

Seb

On 13. 02. 17 17:17, OvermindDL1 wrote:

yep would like to get the brunch config

@pyladune https://github.com/pyladune Here is my plugins ection from my brunch file:

polymer: {
  vulcanize: {
    options: {
      abspath: 'web/static',
      inlineScripts: true,
      inlineCss: true,
      stripComments: true
      // excludes: [ // Windows Vulcanize support for excludes is borked,

doubles the path from volume root... // "web/static/webcomponents/_polymer/polymer/polymer.html" // // /._polymer\/polymer\/polymer[-micron].html/ // ] } }, crisper: { disabled: true }, paths: { 'global.polymer': { vulcanize: { options: { abspath: 'web/static', inlineScripts: true, inlineCss: true, stripComments: true // excludes: [ // Windows Vulcanize support for excludes is borked, doubles the path from volume root... // "web/static/webcomponents/_polymer/polymer/polymer.html" // // /._polymer\/polymer\/polymer[-micron].html/ // ] } }, crisper: { disabled: false } } },

Basically I have a global.polymer file, it is full of the actual act of grabbing polymer and of the usual components that can be used by anything (but should not be duplicated), with crisper enabled on it so the javascript gets split off and built with brunch.

I also have a polymer file for each 'section' on the website, so say for a messaging page I have a |messenger.polymer| file that just imports all the messenger related things.

On the SPA page that Phoenix sends it imports the global html file first then loads the javascript async with a callback to know when done, this is done this way from a phoenix template:

<link rel="import" href="<%= static_path(@conn, "/webcomponents/global.html") %>">

This way I make sure not to require in the global javascript part until the import is done. My main app file also loads the webcomponents polyfill (which is what send the |HTMLImportsLoaded| event).

The main SPA page also sets up a phoenix socket and asks for the view that should be shown based on the URL, the servers sends back an object of the element to display and files to import, the SPA page first imports the files (while showing a loading indicator on the site) and when the import callback is called it removes the loading indicator and dynamically creates that element (passing it some useful things like the phoenix socket and so forth), so I have a completely server-side driven page that I can update dynamically if want. :-)

beside i'm trying to find people willing to help to port
https://github.com/kenny-hibino/stories to phoenix. then if possible
moving from BS to polymer.

For note, BS works fine with polymer, I use BS with polymer. :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/OvermindDL1/polymer-brunch/issues/3#issuecomment-279440003, or mute the thread https://github.com/notifications/unsubscribe-auth/AB90fsbo0ht-8ImaORVu6nuRLU9Uuq5Oks5rcIIsgaJpZM4L-Ic4.

[OvermindDL1]

However i turn crazy with this :-) I can not figure out why i still have to load all polymer html one one one even after brunch compilaiton...which makes a ugly response time.

You only need to do that if you use templates, if you use the pure javascript polymer API then you do not, but templates have to live in HTML, whether that is in your outgoing HTML or a dedicated file, it does, however it is very easily cacheable so if you set your headers right (which for phoenix it automatically does in prod, but not dev on purpose) then it is not an issue anyway. :-)

The vulcanization takes the many polymer template files and brings them together to just one html file, which reduces loading time on HTML1.1 connections. :-)

Could I share with you an access to our git just to have a very quick look in this config file and perhaps find the small thing i miss ?

I can if you want, but is it already working? You should be getting a single html file as output from your whatever.polymer file, are you not?

Also what is the purpose to have polymer + BS in the same project ? Can't we do all what BS do with polymer only ?

BS is a language that compiles to Javascript, Polymer is a high-level API on webcomponents. You can use Polymer from BS just by binding to it. I am in the process of making a Polymer/ELM level webcomponent API on BS so something like Polymer would not be needed, but the webcomponent polyfill would still be needed regardless. However I do like using Polymer from BS itself even as-is. :-)

But yeah, they are different purviews and do not conflict at all. I like using BS as the language because I can write better code in it with less effort. The strong typing is a massive boon, but if that is all I wanted I could just use some kind of typed javascript, however it also gives me a better and more expressive language while remaining entirely type-safe while giving me a build system that is magnitudes faster than even the fastest typed javascript compilers, and that is one of the best things about it to me, even ignoring the host of other benefits that it gives. ^.^