support react 18; use vite/vitest for dev environment (#138)

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: Deploy docs
+
+on:
+  push:
+    branches: ["react18"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout your repository using git
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7.18.2
+      - run: pnpm i
+      - run: pnpm build:docs
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'docs/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
+

.github/workflows/test.yml

@@ -1,18 +1,18 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
 name: Test
 
 on: [push, pull_request]
 
 jobs:
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
-      - run: npm i
-      - run: npm i react@16 react-dom@16 flickity
-      - run: npm test
+          node-version: 18
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7.18.2
+      - run: pnpm i
+      - run: pnpm pretty
+      - run: pnpm test

.gitignore

@@ -42,4 +42,6 @@ Thumbs.db
 
 # Custom #
 ##########
-/node_modules
+/node_modules
+/docs
+/dist

.npmignore

@@ -1,3 +1,10 @@
 /node_modules
-/test.js
-examples
+/__tests__
+/examples
+/docs
+/src
+/.github
+index.html
+build.js
+build-doc.js
+vite.config.js

.npmrc

@@ -1 +1 @@
-package-lock=false
+registry=https://registry.npmjs.org

README.md

@@ -1,7 +1,6 @@
 React Flickity Component
 =======================
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/theolampert/react-flickity-component.svg)](https://greenkeeper.io/)
 [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 # Introduction:
@@ -17,6 +16,10 @@ npm install react-flickity-component
 
 # Usage:
 
+## V4 Updates
+V4 only supports react v18 and above. V4 also comes with an esmodule bundle format to support modern frontend tooling like vite.
+If you are staying on react v16, please keep using v3. 
+
 ```javascript
 // Commonjs
 const Flickity = require('react-flickity-component');

__tests__/component.spec.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, screen, waitFor } from '@testing-library/react';
+import Flickity from '../src';
+
+afterEach(() => {
+  cleanup();
+});
+
+
+it('Calls render and componentDidMount', () => {
+  const componentDidMountSpy = vi.spyOn(Flickity.prototype, 'componentDidMount');
+  const renderSpy = vi.spyOn(Flickity.prototype, 'render');
+
+  render(<Flickity/>);
+
+  expect(componentDidMountSpy).toHaveBeenCalledOnce();
+  expect(renderSpy).toHaveBeenCalled();
+});
+
+it('Renders children', async () => {
+  const { getAllByAltText } = render(
+    <Flickity>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+    </Flickity>
+    );
+
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(3));
+});
+
+it('Renders a static carousel', () => {
+  const { getAllByAltText, rerender } = render(
+    <Flickity static>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+    </Flickity>
+    );
+
+  expect(getAllByAltText('children').length).toEqual(2);
+})
+
+it('Reload carousel even it\'s static', () => {
+  const { getAllByAltText, rerender } = render(
+    <Flickity static reloadOnUpdate>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+    </Flickity>
+    );
+
+  expect(getAllByAltText('children').length).toEqual(2);
+
+  rerender(
+    <Flickity static reloadOnUpdate>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+      <img src="/images/placeholder.png" alt="children"/>
+    </Flickity>
+  );
+  expect(getAllByAltText('children').length).toEqual(3);
+})

build-docs.mjs

@@ -0,0 +1,10 @@
+import { build } from 'vite'
+
+;(async () => {
+  await build({
+    base: '/react-flickity-component/',
+    build: {
+      outDir: 'docs',
+    },
+  })
+})()

build.mjs

@@ -0,0 +1,28 @@
+import { resolve } from 'path'
+import { fileURLToPath } from 'url'
+import { build } from 'vite'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+;(async () => {
+  await build({
+    build: {
+      sourcemap: true,
+      lib: {
+        entry: resolve(__dirname, 'src/index.js'),
+        name: 'ReactFlickityComponent',
+        formats: ['es', 'umd'],
+        fileName: (format) => `react-flickity-component.${format}.js`,
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        output: {
+          globals: {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+          },
+        },
+      },
+    },
+  })
+})()

examples/App.css

@@ -0,0 +1,8 @@
+.carousel {
+  height: 300px;
+}
+
+.carousel-image {
+  min-width: 150px;
+  height: 200px;
+}

examples/App.jsx

@@ -0,0 +1,25 @@
+import Flickity from '../src/index.js'
+import './App.css'
+
+import Default from './Default.jsx'
+import Static from './Static.jsx'
+
+function App() {
+  return (
+    <>
+      <header>
+        <nav>
+          <a href="https://github.com/yaodingyd/react-flickity-component">Github</a>
+        </nav>
+        <h1>React-Flickity-Component</h1>
+      </header>
+
+      <main>
+        <Default />
+        <Static />
+      </main>
+    </>
+  )
+}
+
+export default App

examples/Default.jsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import Flickity from '../src/index.js'
+import { images } from './images.js'
+
+export default function Default() {
+  const [imgs, setImages] = useState(images)
+
+  function addImage() {
+    const newImages = [...imgs]
+    newImages.push('https://picsum.photos/200/300')
+    setImages(newImages)
+  }
+
+  return (
+    <>
+      <h3>Default</h3>
+      <pre>
+        &lt;Flickity&gt;&#123;children&#125;&lt;&#47;Flickity&gt;
+      </pre>
+      <p className="carousel">
+        <Flickity >
+          {imgs.map(image => <img src={image} key={image} className="carousel-image"/>)}
+        </Flickity>
+      </p>
+      <button onClick={addImage}>Add image to carousel</button>
+    </>
+  )
+}