feat(strip-microbundle-add-render-load)

- `load` function
  - async function that loads components from files given a file path
- `render` function
  - sync function that renders a component given a HTML string
  - option to override `x-data`
  - attaches all `__x` properties on the returned component

.github/workflows/nodejs.yml

@@ -24,5 +24,5 @@ jobs:
       run: yarn
     - name: lint
       run: yarn lint
-    - name: build & test
-      run: yarn build && yarn test
+    - name: test
+      run: yarn test

README.md

@@ -1,13 +1,80 @@
 ![Build](https://github.com/HugoDF/buttondown/workflows/Build%20&%20test/badge.svg)
 
-microbundle-ts-pkg: A TypeScript npm package skeleton/starter project with microbundle, AVA and XO
+Utilities for testing Alpine.js components.
 
-Comes with:
+**This library allows you to quickly and easily write tests for Alpine.js applications via Node.js using any testing library.**
 
-- [SAMPLE_README.md](./SAMPLE_README.md) and [USE_CASES.md](./USE_CASES.md) for documentation.
-- AVA for testing (see [./tests](./tests))
-- XO for linting/formatting
-- microbundle for compiling TypeScript to UMD, ESM, CJS
+This project is not officially affiliated with Alpine.js, it's maintained by community members. For any feedback, questions or issues, please create [issues](https://github.com/HugoDF/alpine-test-utils/issues) and [pull requests](https://github.com/HugoDF/alpine-test-utils/blob/master/README.md#contributing) or merely upvote or comment on existing issues or pull requests.
+
+# Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Installation](#installation)
+  - [Prerequisites](#prerequisites)
+  - [Install Package](#install-package)
+- [Quick Start, Create a Draft](#quick-start-create-a-draft)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+  - [Requirements](#requirements)
+  - [Setup](#setup)
+  - [npm scripts](#npm-scripts)
+- [About](#about)
+  - [Acknowledgments](#acknowledgments)
+- [LICENSE](#license)
+
+# Installation
+
+## Prerequisites
+
+- Node.js version 10 or 12
+
+## Install Package
+
+The following recommended installation requires [npm](https://npmjs.org/). If you are unfamiliar with npm, see the [npm docs](https://npmjs.org/doc/). Npm comes installed with Node.js since node version 0.8.x, therefore, you likely already have it.
+
+```sh
+npm install --save-dev alpine-test-utils
+```
+
+You may also use [yarn](https://yarnpkg.com/en/) to install.
+
+```sh
+yarn add --dev alpine-test-utils
+```
+
+> **Note**: if you're using Alpine.js from CDN you will also need to install it using npm or Yarn
+
+```sh
+npm install --save alpinejs
+# or for Yarn users
+yarn add alpinejs
+```
+
+<a name="quick-start"></a>
+# Quick Start, Create a Draft
+
+Here's an example to render an Alpine.js component that's situated in the `test.html` file:
+
+```js
+import {load, render} from 'alpine-test-utils';
+
+test('render and override x-data', () => {
+  const componentHtml = `<div x-data="{foo: 'hello'}">
+    <span x-text="foo"></span>
+  </div>`
+  const component = render(componentHtml, { foo: 'world' });
+  expect(component.querySelector('span').innerText).toEqual('world');
+});
+```
+
+For more complex use cases, please see [USE_CASES.md](./USE_CASES.md).
+
+
+# Roadmap
+
+If you are interested in the future direction of this project, please take a look at the open [issues](https://github.com/HugoDF/microbundle-ts-pkg/issues) and [pull requests](https://github.com/HugoDF/microbundle-ts-pkg/pulls). I would love to hear your feedback!
+
+# Contributing
 
 ## Requirements
 

fixtures/multiple-components.html

@@ -0,0 +1,3 @@
+<div x-data="" name="component-1"></div>
+<div x-data="" name="component-2"></div>
+<div x-data="" name="component-3"></div>

fixtures/single-component.html

@@ -0,0 +1 @@
+<div x-data="" name="component-1"></div>

fixtures/template.html

@@ -0,0 +1,3 @@
+<div x-data="{ foo: 'bar' }">
+  <span x-text="foo"></span>
+</div>

fixtures/template.php

@@ -0,0 +1,3 @@
+<div x-data="<? echo "{ foo: 'bar' }" ?>">
+  <span x-text="foo"></span>
+</div>

package.json

@@ -1,49 +1,52 @@
 {
-  "name": "microbundle-ts-pkg",
-  "description": "A TypeScript npm package skeleton/starter project with microbundle, AVA and XO",
+  "name": "alpine-test-utils",
+  "description": "Utilities for testing Alpine.js components",
   "version": "0.0.1",
-  "source": "src/main.ts",
-  "main": "dist/main.umd.js",
-  "module": "dist/main.modern.module.js",
-  "unpkg": "dist/main.umd.js",
-  "types": "dist/main.d.ts",
+  "source": "src/main.js",
+  "main": "src/main.js",
+  "//types": "dist/main.d.ts",
   "keywords": [
-    "microbundle",
-    "typescript"
+    "alpinejs",
+    "testing",
+    "jsdom"
   ],
   "files": [
-    "dist/**.js*",
-    "dist/**/*.ts"
+    "src/**.js*"
   ],
   "scripts": {
-    "build": "microbundle --define PKG_VERSION=$npm_package_version",
-    "watch": "microbundle watch --define PKG_VERSION=$npm_package_version",
     "test": "ava",
     "lint": "xo src tests",
     "format": "xo src tests --fix",
     "prepack": "rm -rf dist && yarn build",
     "release": "yarn prepack && source .env && np"
   },
+  "peerDependencies": {
+    "alpinejs": "^2.3.1"
+  },
+  "dependencies": {
+    "jsdom": "^16.2.2"
+  },
   "devDependencies": {
+    "alpinejs": "^2.3.1",
     "ava": "^3.7.0",
     "esm": "^3.2.25",
-    "microbundle": "^0.11.0",
     "np": "^6.2.1",
     "xo": "^0.30.0"
   },
   "xo": {
     "prettier": true,
     "space": true,
     "globals": [],
-    "rules": {}
+    "rules": {
+      "unicorn/prefer-text-content": 0
+    }
   },
   "ava": {
     "require": [
       "esm"
     ]
   },
   "license": "MIT",
-  "dependencies": {},
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -52,11 +55,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/HugoDF/microbundle-ts-pkg.git"
+    "url": "git+https://github.com/HugoDF/alpine-test-utils.git"
   },
   "author": "Hugo",
   "bugs": {
-    "url": "https://github.com/HugoDF/microbundle-ts-pkg/issues"
+    "url": "https://github.com/HugoDF/alpine-test-utils/issues"
   },
-  "homepage": "https://github.com/HugoDF/microbundle-ts-pkg#readme"
+  "homepage": "https://github.com/HugoDF/alpine-test-utils#readme"
 }

src/config.js

@@ -0,0 +1,58 @@
+// @ts-check
+const {JSDOM} = require('jsdom');
+
+/**
+ * Override Node.js `global` using passed `override` object.
+ *
+ * @param {object} override - Override object
+ * @returns {void}
+ */
+function setGlobal(override) {
+  Object.assign(global, override);
+}
+
+/**
+ * Set `navigator` global.
+ *
+ * @param {Navigator} navigator
+ * @returns {void}
+ */
+function setNavigator(navigator) {
+  setGlobal({
+    navigator
+  });
+}
+
+/**
+ * Set `MutationObserver` global.
+ *
+ * @param {Function} mutationObserver
+ * @returns {void}
+ */
+function setMutationObserver(mutationObserver) {
+  setGlobal({
+    MutationObserver: mutationObserver
+  });
+}
+
+/**
+ * Pre-Alpine.start() setup work.
+ */
+function config() {
+  // These need to happen before Alpine.js loads
+  // otherwise it tries to start() itself,
+  // since "isTesting" returns false.
+  setNavigator(new JSDOM().window.navigator);
+  setMutationObserver(
+    class {
+      observe() {}
+    }
+  );
+}
+
+module.exports = {
+  setGlobal,
+  setNavigator,
+  setMutationObserver,
+  config
+};