diff --git a/examples/with-babel-macros/.babelrc b/examples/with-babel-macros/.babelrc new file mode 100644 index 00000000..d7d556d1 --- /dev/null +++ b/examples/with-babel-macros/.babelrc @@ -0,0 +1,4 @@ +{ + "presets": ["react"], + "plugins": ["babel-macros"] +} diff --git a/examples/with-babel-macros/README.md b/examples/with-babel-macros/README.md new file mode 100644 index 00000000..32e38d79 --- /dev/null +++ b/examples/with-babel-macros/README.md @@ -0,0 +1,39 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-babel-macros) + +# Example app with [babel-macros](https://github.com/kentcdodds/babel-macros) + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-babel-macros +cd with-babel-macros +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how to configure and use [`babel-macros`](https://github.com/kentcdodds/babel-macros) which allows you +to easily add babel plugins which export themselves as a macro without needing +to configure them. + +You'll notice the configuration in `.babelrc` includes the `babel-macros` +plugin, then we can use the `preval.macro` in `pages/index.js` to pre-evaluate +code at build-time. `preval.macro` is effectively transforming our code, but +we didn't have to configure it to make that happen! + +Specifically what we're doing is we're prevaling the username of the user who +ran the build. diff --git a/examples/with-babel-macros/package.json b/examples/with-babel-macros/package.json new file mode 100644 index 00000000..58e938e6 --- /dev/null +++ b/examples/with-babel-macros/package.json @@ -0,0 +1,22 @@ +{ + "name": "with-babel-macros", + "version": "1.0.0", + "description": "using next.js with babel-macros", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^15.4.2", + "react-dom": "^15.4.2" + }, + "author": "Kent C. Dodds (http://kentcdodds.com/)", + "license": "MIT", + "devDependencies": { + "babel-macros": "^0.5.1", + "babel-preset-react": "^6.24.1", + "preval.macro": "^1.0.1" + } +} diff --git a/examples/with-babel-macros/pages/_document.js b/examples/with-babel-macros/pages/_document.js new file mode 100644 index 00000000..53697b98 --- /dev/null +++ b/examples/with-babel-macros/pages/_document.js @@ -0,0 +1,19 @@ +import React from 'react' +import Document, {Head, Main, NextScript} from 'next/document' + +export default class MyDocument extends Document { + render () { + return ( + + + With babel-macros +