feat: typescript rewrite and upgrade to react 19 (#157)

Author: yaodingyd

README.md

@@ -1,8 +1,6 @@
 React Flickity Component
 =======================
 
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-
 # Introduction:
 A React.js Flickity component.
 
@@ -16,6 +14,9 @@ npm install react-flickity-component
 
 # Usage:
 
+## V5 Updates
+V5 supports react v19 and above. 
+
 ## 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. 

__tests__/component.spec.jsx

@@ -3,53 +3,60 @@ import {it, expect, vi, afterEach } from 'vitest';
 import { render, cleanup, screen, waitFor } from '@testing-library/react';
 import Flickity from '../src';
 
-afterEach(() => {
+afterEach(async () => {
+  await new Promise(resolve => setTimeout(resolve, 0));
   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 component successfully', async () => {
+  const { container } = render(<Flickity/>);
+  
+  await waitFor(() => {
+    expect(container.firstChild).toBeTruthy();
+  });
+  
+  expect(container.firstChild).toBeInstanceOf(HTMLElement);
 });
 
 it('Renders children', async () => {
-  const { getAllByAltText } = render(
+  const { getAllByAltText, unmount, container } = 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(container.firstChild).toBeTruthy();
+  });
 
   await waitFor(() => expect(getAllByAltText('children').length).toEqual(3));
+  unmount();
 });
 
-it('Renders a static carousel', () => {
-  const { getAllByAltText, rerender } = render(
+it('Renders a static carousel', async () => {
+  const { getAllByAltText, unmount } = render(
     <Flickity static>
       <img src="/images/placeholder.png" alt="children"/>
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
     );
 
-  expect(getAllByAltText('children').length).toEqual(2);
-})
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(2));
+  unmount();
+});
 
-it('Reload carousel even it\'s static', () => {
-  const { getAllByAltText, rerender } = render(
+it('Reload carousel even it\'s static', async () => {
+  const { getAllByAltText, rerender, unmount } = 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);
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(2));
 
   rerender(
     <Flickity static reloadOnUpdate>
@@ -58,5 +65,7 @@ it('Reload carousel even it\'s static', () => {
       <img src="/images/placeholder.png" alt="children"/>
     </Flickity>
   );
-  expect(getAllByAltText('children').length).toEqual(3);
-})
+  
+  await waitFor(() => expect(getAllByAltText('children').length).toEqual(3));
+  unmount();
+});

examples/App.jsx examples/App.tsxexamples/App.jsx renamed to examples/App.tsx

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

examples/Default.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import Flickity from '../src/index';
+import { images } from './images';
+
+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>
+    </>
+  );
+}

examples/Default.tsx

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

examples/Static.jsx

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
     <title>React-Flickity-Component</title>
-    <script type="module" src="main.jsx"></script>
+    <script type="module" src="main.tsx"></script>
   </head>
   <body>
     <div id="root"></div>