This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
apowers313-testing with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
Want to create your own custom HTML tag? Big fan of open source? Enjoy it when you have a mature development process? This is the project for you...
Much like Polymer boilerplate, Polymer seed-element, generator element, and others, this is a template for creating new custom web elements. (Sorry for calling it "template" -- I realize that has other meanings for web components.)
So why another template for Polymer elements? This one has three ideas behind it:
git pullto merge in new features and services and you will get anything new that has been added. This can be new features, new documentation, new badges, etc.
If there are features or services that you think should be here, I am happy to take requests. Feel free to submit an issue or send in a pull request.
npm install open-element-template
...but you already knew that, right? The trick here is that there is a postinstall script that runs through a series of questions to configure all the services. This involves setting up a new repo on GitHub, enabling builds on Travis CI, and optionally setting up other services. It then overwrites the files in this package with configuration files that tie together all the services. It's awesome when you have a configuration management system that just works together. Especially when you don't have to spend two weeks setting it up.
npm test-- uses the web component tester to open browsers at SauceLabs and test your element on each of them (requires SAUCE_USERNAME and SAUCE_ACCESS_KEY environment variables to be set, see above)
npm run demo-- shows your new element in action
npm run testdebug-- runs a single pass of the tests using your local copy of Chrome, and keeps Chrome open so that you can see the debug console and refresh to re-run tests
npm run localtest-- runs tests in all browsers that are installed on your system
npm run docs-- generate docs for your components and store them in the ./docs directory
npm run deploydocs-- deploy your documentation to GitHub (requires that the
GH_TOKENenvironment variable be set to your GitHub personal token, created above)
npm run testdocs-- generate docs for your components, and fire up a webserver and a browser to view them -- great for testing your docs as you are writing them
npm run config-- if you didn't complete configuration during installation, this is how you can kick it off again
git cz -a-- commit all changes using Commitizen
<template>tags to include new HTML in your element. Customize the
npm run demoyou'll see your changes. And if you run
npm testyou'll notice... whoops! You broke the tests! Edit test/open-element.html to update your tests. Tests are using the Web Component Tester, which uses Mocha as a test framework, Chai for assertions, and Sinon for other stuff -- especially mocking servers. Don't forget to use
npm run testdebugif your tests aren't doing what you expect.
git cz -a(make sure that you have Commitizen installed) and follow the instructions
git push origin masterto push your changes back to GitHub. Watch with delight as Travis and SauceLabs test your element on a wide variety of browsers, and semantic-release automatically bumps-up your version number, creates a change log and publishes the package to npm.
Are there new features in this repo that you wish you had? If you forked or cloned from this project, here's how to merge them into your project:
cd YourProject-- get ready...
git checkout master-- make sure your project is up to date and you are working on the master branch
git pull https://github.com/apowers313/open-element-template master-- fetch and merge the latest version of this project into your master branch
git commit -am 'Merged latest version of open-element-template'-- commit merge changes
git push origin master-- push the entire project back to GitHub