googlearchive / polymer-element-catalog

A catalog of Polymer-based web components built by the Polymer team
BSD 3-Clause "New" or "Revised" License
164 stars 91 forks source link

Integrating p-e-c in a build process to generate an offline element catalog #290

Open nomego opened 7 years ago

nomego commented 7 years ago

With the new https://beta.webcomponents.org catalog coming up, I think polymer-element-catalog will have the most use and potential internally/privately as a reusable offline element catalog.

I've encountered some issues getting this to work.

My approach is to add polymer-element-catalog as an npm dev dependency (npm install --save-dev polymer/polymer-element-catalog) so I can run the catalog data build by something like:

gulp.task('catalog:dev', function () {

    var destDir = '.tmp',
        destFilepath = path.join('.', destDir, 'catalog.json'),
        pecBuildDir = './node_modules/polymer-element-catalog/build',
        catalogBuilder = require('./' + path.join(pecBuildDir, 'catalog')),
        stream = require('./' + path.join(pecBuildDir, 'catalog/utils/stream')).obj;

    return catalogBuilder({
            src: './app/polymer/catalog.json',
            destDir: destDir
        })
        .pipe(stream.stringify({ space: 2 }))
        .pipe(stream.writeFile(destFilepath));
});

Already here I encounter issues since all polymer-element-catalog dependencies are devDependencies, so no deps needed to run the build gets installed although it seems like almost all of them are needed. It would be ideal if we could depend on polymer-element-catalog and its catalog data build (so move most deps from devDeps) and let the build of the web app be the one depending on the devDeps. Would this be an acceptable change?

It also seems a bit hard to make element discovery/traversal not depend on github repos but rather just say that our collection "internal-elements" consists of elements located at a list of paths, but maybe I'm approaching it wrong?

Then I need a way to bundle a built version of polymer-element-catalog in our dev environment along with the catalog data, which is fine if it's "install p-e-c ; build dist ; move dist to /docs ; commit".

It is possible to use polymer-element-catalog to accomplish this? Is there an example usage I could have a look at?

Thanks.

Related to #24