Skip to content
This repository has been archived by the owner on Dec 9, 2019. It is now read-only.

Commit

Permalink
feat(remark): added remark and remark:lint
Browse files Browse the repository at this point in the history
  • Loading branch information
LasaleFamine committed Oct 14, 2017
1 parent 97a10f2 commit b6c004a
Show file tree
Hide file tree
Showing 4 changed files with 1,281 additions and 35 deletions.
1 change: 0 additions & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

The MIT License (MIT)

Copyright (c) 2017 PolymerX
Expand Down
73 changes: 53 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,64 +6,82 @@
[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square)](https://github.com/sindresorhus/xo)
[![Polymer Skeleton](https://img.shields.io/badge/polymerX-SKELETON-435877.svg?style=flat-square)](https://github.com/PolymerX/polymer-skeleton)

# Polymer Skeleton: **Polymer 3** Progressive Web App

## Polymer Skeleton: **Polymer 3** Progressive Web App
> A mininum boilerplate to deliver a Polymer 3.x with Webpack, PostCSS and Service Workers ready.
> Made for personal use, glad if someone can get a good starting point from here. **Bye bye Bower**.

## Features

- [Webpack](https://webpack.js.org/)
- [webpack-dev-server](https://github.com/webpack/webpack-dev-server) with hot reloading active.
- [PostCSS](http://postcss.org/) with [cssnext](http://cssnext.io/) (include autoprefixer) plugin.
- Service Workers generated by [Workbox](https://workboxjs.org/) through the [workbox-webpack-plugin](https://www.npmjs.com/package/workbox-webpack-plugin) (just for `build`)
- Copy statics file on `dist` folder (like `vendor/webcomponents-loader.js` and others)
- [standard-version](https://github.com/conventional-changelog/standard-version) is bundled for managing versioning and changelogs.
* [Webpack](https://webpack.js.org/)
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server) with hot reloading active.
* [PostCSS](http://postcss.org/) with [cssnext](http://cssnext.io/) (include autoprefixer) plugin.
* Service Workers generated by [Workbox](https://workboxjs.org/) through the [workbox-webpack-plugin](https://www.npmjs.com/package/workbox-webpack-plugin) (just for `build`)
* Copy statics file on `dist` folder (like `vendor/webcomponents-loader.js` and others)
* [standard-version](https://github.com/conventional-changelog/standard-version) is bundled for managing versioning and changelogs.

#### Loaders
- [babel-loader](https://github.com/babel/babel-loader) with the [babel-preset-env](https://github.com/babel/babel-preset-env) enabled for the [***last 2 versions***](https://babeljs.io/docs/plugins/preset-env/).
- [text-loader](https://github.com/dfenstermaker/text-loader) - Load HTML templates as string.
- [postcss-loader](https://github.com/postcss/postcss-loader) - Load PostCSS into the `<style>` scoped tag of Polymer elements as string.

* [babel-loader](https://github.com/babel/babel-loader) with the [babel-preset-env](https://github.com/babel/babel-preset-env) enabled for the [**last 2 versions**](https://babeljs.io/docs/plugins/preset-env/).
* [text-loader](https://github.com/dfenstermaker/text-loader) - Load HTML templates as string.
* [postcss-loader](https://github.com/postcss/postcss-loader) - Load PostCSS into the `<style>` scoped tag of Polymer elements as string.


## Supported Browsers

> TODO

## Usage

Clone this repository:

$ git clone https://github.com/PolymerX/polymer-skeleton [your-app-name]
```bash
git clone https://github.com/PolymerX/polymer-skeleton [your-app-name]
```

Remove the `.git` folder and change details within:

- `package.json`
- `src/manifest.json`
* `package.json`
* `src/manifest.json`

Then start building your application!

$ yarn
```bash
yarn
```

#### Developing

Start the `webpack-dev-server` on localhost `http://localhost:3000` with hot-reload and watch on `.postcss` files:

$ yarn dev
```bash
yarn dev
```

#### Test

XO for code style, Stylelint for PostCSS linting, and WCT for components tests:

$ yarn test
```bash
yarn test
```

Run [Lighthouse](https://github.com/GoogleChrome/lighthouse) for testing the PWA capabilities:

$ yarn test:lighthouse
```bash
yarn test:lighthouse
```

#### Build

(Almost) production-ready (`webpack --optimize-minimze` and copy statics) to `dist` folder. Also generating Service Workers:

$ yarn build
```bash
yarn build
```


## Styling components with PostCSS and CSSNext

Expand All @@ -74,14 +92,29 @@ During development `.postcss` files will be watched, compiled and injected to th
**How about commons styles?**
You can simply `import` any other `.postcss` file within your main component `.js` file and print it inside the `template()`.


## How Polymer 3 is imported

We are currently used a modified version of the `@polymer/polymer` official NPM version. The `flat` property within the `package.json` is causing some problem with the load dependency system of `webpack`.

## @webcomponents/webcomponentsjs

## [**@webcomponents/webcomponentsjs**](https://github.com/webcomponents/webcomponentsjs)

We are getting the `webpcomponents-loader.js` polyfill from GitHub using NPM/Yarn and copy it into a `vendor` folder with a `Node` script.


## custom-element-es5-adpater.js

Loading the `custom-element-es5-adapter.js` is necessary because the `custom elements`' [known(1)](https://stackoverflow.com/questions/43520535/class-constructor-polymerelement-cannot-be-invoked-without-new/45097891#45097891) [issue(2)](https://github.com/webcomponents/custom-elements#es5-vs-es2015) (the lovely `Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'`) about ES6 `classes`
Loading the `custom-element-es5-adapter.js` is necessary because the `custom elements` [known(1)](https://stackoverflow.com/questions/43520535/class-constructor-polymerelement-cannot-be-invoked-without-new/45097891#45097891) [issue(2)](https://github.com/webcomponents/custom-elements#es5-vs-es2015) (the lovely `Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'`) about ES6 `classes`

## License

PolymerX © MIT

## Contributors

| Name | Website |
| ------------------------- | ------------------------ |
| **Alessio Occhipinti** | <https://godev.space> |
| **Mattia Astorino** | <http://equinsuocha.io/> |

15 changes: 14 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@
"main": "src/index.js",
"license": "MIT",
"author": "LasaleFamine <[email protected]>",
"repository": "PolymerX/polymer-skeleton",
"contributors": [
"Alessio Occhipinti <[email protected]> (https://godev.space)",
"Mattia Astorino (http://equinsuocha.io/)"
],
"scripts": {
"build": "NODE_ENV=production webpack --optimize-minimize",
"dev": "webpack-dev-server --hot --inline",
Expand All @@ -13,9 +18,10 @@
"test:travis": "yarn pretest && yarn lint && wct",
"clean:lighthouse": "rm *.report.html",
"posttest": "yarn rmbower",
"lint": "xo && stylelint src/components/**/*.postcss",
"lint": "xo && stylelint src/components/**/*.postcss && remark .",
"linkbower": "node scripts/link-bower.js",
"rmbower": "node scripts/link-bower.js remove",
"remark:lint": "remark .",
"release": "standard-version"
},
"xo": {
Expand All @@ -31,6 +37,11 @@
"test/test-fixture.js"
]
},
"remarkConfig": {
"plugins": [
"preset-github"
]
},
"devDependencies": {
"@polymer/test-fixture": "PolymerX/test-fixture#3.0-preview",
"babel-loader": "7.1.2",
Expand All @@ -46,6 +57,8 @@
"postcss": "6.0.13",
"postcss-cssnext": "3.0.2",
"postcss-loader": "2.0.8",
"remark-cli": "4.0.0",
"remark-preset-github": "0.0.7",
"standard-version": "4.2.0",
"stylelint": "8.2.0",
"stylelint-config-standard": "17.0.0",
Expand Down
Loading

0 comments on commit b6c004a

Please sign in to comment.