fix(pencil): Add build and readme

.babelrc

@@ -1,8 +1,11 @@
 {
-  "presets": ["@babel/preset-env"],
-  "env": {
-    "test": {
-      "presets": [["@babel/preset-env"]]
-    }
-  }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": 3
+      }
+    ]
+  ]
 }

.gitignore

@@ -1,2 +1,3 @@
+dist
 .idea
 node_modules

README.md

@@ -0,0 +1,211 @@
+<div align="center">
+<h1>Twig Testing Library</h1>
+
+<a href="https://www.emojione.com/emoji/1f410">
+  <img
+    height="143"
+    width="200"
+    alt="goat"
+    src="https://twig.symfony.com/images/logo.png"
+  />
+</a>
+
+<p>A twig testing utility that allows the same testing ergonomics as <a href="https://testing-library.com/react">React testing library</a>.</p>
+
+<br />
+</div>
+
+<hr />
+
+<!-- prettier-ignore-start -->
+[![Build Status][build-badge]][build]
+[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-badge]][prs] 
+
+[![Watch on GitHub][github-watch-badge]][github-watch]
+[![Star on GitHub][github-star-badge]][github-star]
+[![Tweet][twitter-badge]][twitter]
+<!-- prettier-ignore-end -->
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [The problem](#the-problem)
+- [This solution](#this-solution)
+- [Installation](#installation)
+- [Examples](#examples)
+  - [Basic Example](#basic-example)
+  - [More Examples](#more-examples)
+- [Issues](#issues)
+  - [🐛 Bugs](#-bugs)
+  - [💡 Feature Requests](#-feature-requests)
+  - [❓ Questions](#-questions)
+- [LICENSE](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## The problem
+
+You are working with Twig in a styleguide-driven-development process. You are writing isolated components
+that consist of css, twig and Javascript.
+You want to be able to test your Javascript in relation to your twig file with maximum isolation.
+
+## This solution
+
+The `Twig Testing Library` is a very lightweight solution based on [Twig JS](https://github.com/twigjs/twig.js) for
+testing Twig-based components. It is heavily influenced by similar libraries such as [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
+It provides light utility functions on top of `Twig JS` and [Dom testing library](https://testing-library.com/docs/dom-testing-library/intro)
+in a way that encourages better testing practices. 
+
+## Installation
+
+This module is distributed via [npm][npm] which is bundled with [node][node] and
+should be installed as one of your project's `devDependencies`:
+
+```
+npm install --save-dev twig-testing-library
+```
+
+You may also be interested in installing `@testing-library/jest-dom` so you can
+use [the custom jest matchers](https://github.com/testing-library/jest-dom).
+
+## Examples
+
+### Basic Example
+
+```javascript
+// accordion.js
+
+class Accordion {
+  constructor(obj) {
+    this.accordion = obj;
+    this.summary = obj.querySelector('.accordion__title');
+  }
+
+  init() {
+    const open = this.accordion.hasAttribute('open');
+    if (open) {
+      this.accordion.classList.add('accordion--open');
+    }
+    this.summary.addEventListener('focus', () => {
+      this.handleFocus();
+    });
+    this.summary.addEventListener('blur', () => {
+      this.handleBlur();
+    });
+    this.summary.addEventListener('click', () => {
+      this.handleClick();
+    });
+  }
+
+  handleFocus() {
+    // Focus class for styling.
+    this.accordion.classList.add('has-focus');
+  }
+
+  handleBlur() {
+    // Focus class for styling.
+    this.accordion.classList.remove('has-focus');
+  }
+
+  handleClick() {
+    const open = this.accordion.classList.contains('accordion--open');
+    this.summary.setAttribute('aria-expanded', !open);
+    this.summary.setAttribute('aria-pressed', !open);
+    this.accordion.classList.toggle('accordion--open');
+  }
+}
+
+export default { Accordion };
+```
+
+```javascript
+// __tests__/accordion.js
+import { render, fireEvent } from 'twig-testing-library'
+
+describe('Accordion toggling', () => {
+  it('Can be rendered open, and then collapsed on click', async () => {
+    // Rendering is async, so you need to use await.
+    const { container, getByText } = await render(
+    // Path to twig template.
+    'accordion.twig',
+    // Template variables/context. 
+    {
+      title: 'Accordion title',
+      open: true,
+    }, 
+    // Namespace support
+    {
+      'my_namespace': './some/path'
+    });
+    const accordionElement = container.querySelector('.accordion');
+    const accordion = new Accordion.Accordion(accordionElement);
+    accordion.init();
+    // Snapshot support via jest.
+    expect(accordionElement).toMatchSnapshot('Initial render');
+    expect(accordionElement.classList.contains('accordion--open')).toBe(true);
+    fireEvent.click(getByText('Accordion title'));
+    expect(accordionElement).toMatchSnapshot('First collapse');
+    expect(accordionElement.classList.contains('accordion--open')).toBe(false);
+  })
+})
+```
+
+### More Examples
+
+- Refer to the [Dom testing library docs](https://testing-library.com/docs/dom-testing-library/example-intro), we're really just adding the ability to render twig templates on top of that.
+
+## Issues
+
+### 🐛 Bugs
+
+Please file an issue for bugs, missing documentation, or unexpected behavior.
+
+[**See Bugs**][bugs]
+
+### 💡 Feature Requests
+
+Please file an issue to suggest new features. Vote on feature requests by adding
+a 👍. This helps maintainers prioritize what to work on.
+
+[**See Feature Requests**][requests]
+
+### ❓ Questions
+
+For questions related to using the library, please visit a support community
+instead of filing an issue on GitHub.
+
+- [Drupal Slack #frontend channel](https://drupal.org/slack)
+
+## LICENSE
+
+[MIT](LICENSE)
+
+<!-- prettier-ignore-start -->
+
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[build-badge]: https://img.shields.io/travis/larowlan/twig-testing-library.svg?style=flat-square
+[build]: https://travis-ci.org/larowlan/twig-testing-library
+[version-badge]: https://img.shields.io/npm/v/twig-testing-library.svg?style=flat-square
+[package]: https://www.npmjs.com/package/twig-testing-library
+[downloads-badge]: https://img.shields.io/npm/dm/twig-testing-library.svg?style=flat-square
+[npmtrends]: http://www.npmtrends.com/twig-testing-library
+[license-badge]: https://img.shields.io/npm/l/twig-testing-library.svg?style=flat-square
+[license]: https://github.com/larowlan/twig-testing-library/blob/master/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[github-watch-badge]: https://img.shields.io/github/watchers/larowlan/twig-testing-library.svg?style=social
+[github-watch]: https://github.com/larowlan/twig-testing-library/watchers
+[github-star-badge]: https://img.shields.io/github/stars/larowlan/twig-testing-library.svg?style=social
+[github-star]: https://github.com/larowlan/twig-testing-library/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20twig-testing-library%20by%20%40@TestingLib%20https%3A%2F%2Fgithub.com%2Flarowlan%2Ftwig-testing-library%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/larowlan/twig-testing-library.svg?style=social
+[bugs]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
+[requests]: https://github.com/larowlan/twig-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
+[good-first-issue]: https://github.com/larowlan/twig-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
+
+<!-- prettier-ignore-end -->

jest.config.js

@@ -2,7 +2,4 @@ module.exports = {
   clearMocks: true,
   coverageDirectory: "coverage",
   testMatch: ['<rootDir>/tests/*.js'],
-  transform: {
-    '^.+\\.js?$': `<rootDir>/jest-preprocess.js`,
-  },
 };

package.json

@@ -3,8 +3,13 @@
   "version": "0.0.0-development",
   "description": "Simple and complete Twig testing utilities that encourage good testing practices.",
   "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "jest",
+    "pretest": "npm run-script build",
+    "build": "rm -rf dist && rollup -c",
     "format": "prettier --write \"{test,src}/**/*.js\"",
     "lint": "prettier --check \"{test,src}/**/*.js\"",
     "coverage": "jest --collect-coverage --collectCoverageFrom=\"src/**/*.js\"",
@@ -35,14 +40,21 @@
   "dependencies": {
     "@babel/runtime": "^7.9.2",
     "@testing-library/dom": "^7.2.0",
+    "core-js": "^3.6.5",
     "drupal-attribute": "^1.0.2",
     "twig": "^1.15.0"
   },
   "devDependencies": {
-    "@babel/polyfill": "^7.8.7",
+    "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
+    "babel-jest": "^25.3.0",
     "jest": "^25.3.0",
     "prettier": "^2.0.4",
+    "rollup": "^2.6.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-uglify": "^6.0.4",
     "semantic-release": "^17.0.4"
   }
 }

rollup.config.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+import babel from 'rollup-plugin-babel';
+
+export default {
+  input: 'src/index.js',
+  external: [
+    'path',
+    'fs',
+    '@testing-library/dom',
+    'twig',
+    'regenerator-runtime/runtime',
+    'drupal-attribute',
+    'core-js/modules/es.array.for-each',
+    'core-js/modules/es.array.is-array',
+    'core-js/modules/es.array.iterator',
+    'core-js/modules/es.object.to-string',
+    'core-js/modules/es.promise',
+    'core-js/modules/es.set',
+    'core-js/modules/es.string.iterator',
+    'core-js/modules/web.dom-collections.for-each',
+    'core-js/modules/web.dom-collections.iterator'
+  ],
+  output: [
+    {
+      file: 'dist/index.js',
+      format: 'cjs',
+      exports: 'named',
+      strict: false
+    }
+  ],
+  plugins: [
+    babel({
+      presets: [['@babel/preset-env', {
+        modules: false,
+        useBuiltIns: 'usage',
+        corejs: 3,
+      }]],
+      babelrc: false,
+    }),
+  ],
+};

src/index.js

@@ -1,7 +1,7 @@
 import { getQueriesForElement, prettyDOM } from "@testing-library/dom"
 import Twig from "twig"
 import fs from "fs"
-import "@babel/polyfill"
+import "regenerator-runtime/runtime"
 import DrupalAttribute from "drupal-attribute"
 
 const mountedContainers = new Set()

tests/index.js

@@ -4,8 +4,7 @@ import {render, fireEvent} from "../src";
 
 describe('Test library by testing an accordion', () => {
   it('Can be initially rendered open', async () => {
-    //expect.assertions(8);
-    const { container, getByText, debug } = await render('./tests/fixtures/accordion.twig', {
+    const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
       title: 'Accordion title',
       open: true,
     }, {
@@ -30,8 +29,7 @@ describe('Test library by testing an accordion', () => {
   });
 
   it('Can be initially rendered closed', async () => {
-    //expect.assertions(8);
-    const { container, getByText, debug } = await render('./tests/fixtures/accordion.twig', {
+    const { container, getByText } = await render('./tests/fixtures/accordion.twig', {
       title: 'Accordion title',
       open: false,
     }, {