feat(docsearch): introduce DocSearch.js v3 (#56)

bundlesize.config.json

@@ -15,6 +15,10 @@
     {
       "path": "packages/docsearch-react/dist/umd/index.js",
       "maxSize": "28 kB"
+    },
+    {
+      "path": "packages/docsearch-js/dist/umd/index.js",
+      "maxSize": "38 kB"
     }
   ]
 }

package.json

@@ -36,14 +36,15 @@
     "cy:run:firefox": "yarn run cy:run --browser firefox",
     "cy:run:edge": "yarn run cy:run --browser edge",
     "cy:clean": "rm -rf cypress/screenshots",
-    "docsearch:lint:css": "stylelint packages/docsearch-react/src/**/*.css"
+    "docsearch:lint:css": "stylelint packages/docsearch-css/src/**/*.css"
   },
   "devDependencies": {
     "@babel/cli": "7.10.1",
     "@babel/plugin-transform-react-jsx": "7.10.1",
     "@babel/preset-env": "7.10.2",
     "@babel/preset-typescript": "7.10.1",
     "@percy/cypress": "2.3.1",
+    "@rollup/plugin-alias": "3.1.1",
     "@rollup/plugin-json": "4.0.2",
     "@rollup/plugin-node-resolve": "7.1.1",
     "@rollup/plugin-replace": "2.3.1",

packages/docsearch-css/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@docsearch/css",
+  "version": "1.0.0-alpha.21",
+  "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
+  "main": "dist/style.css",
+  "unpkg": "dist/style.css",
+  "jsdelivr": "dist/style.css",
+  "scripts": {
+    "build": "yarn build:clean && yarn build:css",
+    "build:css": "mkdir dist && cp src/_variables.css dist/ && cp src/modal.css dist/ && cp src/search-button.css dist/ && cat src/*.css > dist/style.css",
+    "build:css:watch": "chokidar src/*.css --command \"yarn build:css\"",
+    "build:clean": "rm -rf ./dist",
+    "watch": "concurrently \"yarn build:css:watch\""
+  }
+}

packages/docsearch-react/src/styles/search-button.css → packages/docsearch-css/src/search-button.css

@@ -1,5 +1,3 @@
-/* Search Button */
-
 .DocSearch-SearchButton {
   align-items: center;
   background: var(--docsearch-searchbox-background);

packages/docsearch-js/babel.config.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = (api) => {
+  const isTest = api.env('test');
+  const modules = isTest ? 'commonjs' : false;
+  const targets = {};
+
+  if (isTest) {
+    targets.node = true;
+  } else {
+    targets.browsers = ['last 2 versions', 'ie >= 11'];
+  }
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          modules,
+          targets,
+        },
+      ],
+    ],
+    plugins: [['@babel/plugin-transform-react-jsx']],
+  };
+};

packages/docsearch-js/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@docsearch/js",
+  "version": "1.0.0-alpha.21",
+  "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
+  "source": "src/index.ts",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "main": "dist/umd/index.js",
+  "umd:main": "dist/umd/index.js",
+  "unpkg": "dist/umd/index.js",
+  "jsdelivr": "dist/umd/index.js",
+  "scripts": {
+    "build": "yarn build:clean && yarn build:umd && yarn build:esm",
+    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm",
+    "build:esm:watch": "yarn build:esm --watch",
+    "build:umd": "rollup --config",
+    "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
+    "build:types:watch": "chokidar \"**/*.ts\" \"**/*.tsx\" --command \"yarn build:types\" --ignore \"dist\"",
+    "build:clean": "rm -rf ./dist",
+    "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\""
+  },
+  "dependencies": {
+    "@docsearch/react": "^1.0.0-alpha.21",
+    "preact": "^10.0.0"
+  }
+}

packages/docsearch-js/rollup.config.js

@@ -0,0 +1,24 @@
+import json from '@rollup/plugin-json';
+import alias from '@rollup/plugin-alias';
+
+import { sharedPlugins } from '../autocomplete-core/rollup.config';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/umd/index.js',
+    format: 'umd',
+    sourcemap: true,
+    name: 'docsearch',
+  },
+  plugins: [
+    json(),
+    alias({
+      entries: [
+        { find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+      ],
+    }),
+    ...sharedPlugins,
+  ],
+};

packages/docsearch-js/src/docsearch.tsx

@@ -0,0 +1,21 @@
+import React, { render } from 'preact/compat';
+
+import { DocSearch } from '@docsearch/react';
+
+function getHTMLElement(
+  value: string | HTMLElement,
+  environment: typeof window = window
+): HTMLElement {
+  if (typeof value === 'string') {
+    return environment.document.querySelector<HTMLElement>(value)!;
+  }
+
+  return value;
+}
+
+export function docsearch(props) {
+  render(
+    <DocSearch {...props} />,
+    getHTMLElement(props.container, props.environment)
+  );
+}

packages/docsearch-js/src/index.ts

@@ -0,0 +1 @@
+export { docsearch as default } from './docsearch';

packages/docsearch-js/tsconfig.declaration.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true
+  }
+}

packages/docsearch-js/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}

packages/docsearch-react/package.json

@@ -23,19 +23,17 @@
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
   "scripts": {
-    "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:css",
-    "": "// TODO: have a proper build:css, probably including autoprefixer?",
-    "build:css": "cp src/styles/*.css dist/",
-    "build:css:watch": "chokidar src/styles/*.css --command \"yarn build:css\"",
+    "build": "yarn build:clean && yarn build:umd && yarn build:esm",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm",
     "build:esm:watch": "yarn build:esm --watch",
     "build:umd": "rollup --config",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
     "build:types:watch": "chokidar \"**/*.ts\" \"**/*.tsx\" --command \"yarn build:types\" --ignore \"dist\"",
     "build:clean": "rm -rf ./dist",
-    "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\" \"yarn build:css:watch\""
+    "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\""
   },
   "dependencies": {
+    "@docsearch/css": "^1.0.0-alpha.21",
     "@francoischalifour/autocomplete-core": "^1.0.0-alpha.21",
     "@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.21",
     "algoliasearch": "^4.0.0"