Merge branch 'master' into patch-2

Author: capaj

.github/workflows/main.yml

@@ -0,0 +1,25 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

.prettierrc

@@ -1,5 +1,6 @@
 {
   "arrowParens": "always",
   "singleQuote": true,
+  "trailingComma": "none",
   "semi": false
 }

.travis.yml

@@ -1,15 +1,16 @@
 {
   "name": "react-tweet-embed",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "react component that takes tweet id in props and renders tweet embed, nothing more",
   "main": "dist/tweet-embed.js",
+  "types": "dist/tweet-embed.d.ts",
   "module": "dist/tweet-embed.es.js",
   "unpkg": "dist/tweet-embed.umd.js",
   "source": "src/tweet-embed.tsx",
   "scripts": {
     "test": "ava",
     "testu": "ava -u",
-    "build": "microbundle",
+    "build": "microbundle --jsx React.createElement",
     "dev": "microbundle watch",
     "prepublish": "npm test && npm run build"
   },
@@ -24,33 +25,33 @@
   },
   "homepage": "https://github.com/capaj/react-tweet-embed#readme",
   "peerDependencies": {
-    "react": ">0.14.0"
+    "react": ">=17"
   },
   "devDependencies": {
-    "@types/prop-types": "^15.7.0",
-    "@types/react": "^16.8.8",
-    "ava": "^1.4.0",
-    "enzyme": "^3.9.0",
-    "husky": "^1.3.1",
-    "jsdom": "^14.0.0",
-    "microbundle": "^0.11.0",
-    "prettier": "^1.16.4",
-    "pretty-quick": "^1.10.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.5",
-    "rimraf": "^2.6.3",
-    "ts-node": "^8.0.3",
-    "typescript": "^3.3.4000"
+    "@types/prop-types": "^15.7.4",
+    "@types/react": "^17.0.39",
+    "ava": "^3.15.0",
+    "enzyme": "^3.11.0",
+    "husky": "^7.0.4",
+    "jsdom": "^17.0.0",
+    "microbundle": "^0.14.2",
+    "prettier": "^2.5.1",
+    "pretty-quick": "^3.1.3",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "ts-node": "^10.5.0",
+    "typescript": "^4.5.5"
   },
   "files": [
     "dist"
   ],
   "ava": {
-    "compileEnhancements": false,
     "files": [
       "**/*.spec.tsx"
     ],
     "extensions": [
+      "ts",
       "tsx"
     ],
     "require": [

package-lock.json

@@ -8,9 +8,13 @@ npm i react-tweet-embed
 
 ## Quickstart [![Edit react-tweet-embed](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/74rn3r9k0?fontsize=14)
 
-```javascript
+```tsx
+import React from 'react'
 import TweetEmbed from 'react-tweet-embed'
-;<TweetEmbed id="692527862369357824" />
+
+export const App = () => {
+  return <TweetEmbed tweetId="692527862369357824" />
+}
 ```
 
 You don't have to put `//platform.twitter.com/widgets.js` script in your index.html as this lib will put it there if `twttr` is not found on `window`.
@@ -31,4 +35,5 @@ Key-value pairs from the [embedded tweet parameter reference](https://developer.
 ```html
 <TweetEmbed id='783943172057694208' options={{cards: 'hidden' }}/>
 <TweetEmbed id='771763270273294336' options={{theme: 'dark' }}/>
+
 ```

package.json

@@ -3,11 +3,12 @@ import TweetEmbed from './tweet-embed'
 import React from 'react'
 
 test('renders', (t) => {
-  t.snapshot(<TweetEmbed id="692527862369357824" className="tweet" />)
+  t.snapshot(<TweetEmbed tweetId="692527862369357824" className="tweet" />)
 })
 
 test.cb('calls twttr api', (t) => {
   global['window'] = {
+    // @ts-expect-error
     twttr: {
       widgets: {
         createTweetEmbed: (...args) => {
@@ -18,9 +19,9 @@ test.cb('calls twttr api', (t) => {
       }
     }
   }
-
+  // @ts-expect-error
   global['window'].twttr.ready = () => Promise.resolve(global['window'].twttr)
 
-  const comp = new TweetEmbed({ id: 'tweet_id', options: { myOption: 1 } })
+  const comp = new TweetEmbed({ tweetId: 'tweet_id', options: { myOption: 1 } })
   comp.componentDidMount()
 })

readme.md

@@ -2,7 +2,18 @@
 
 The actual snapshot is saved in `tweet-embed.spec.tsx.snap`.
 
-Generated by [AVA](https://ava.li).
+Generated by [AVA](https://avajs.dev).
+
+## renders
+
+> Snapshot 1
+
+    <TweetEmbed⍟
+      className="tweet"
+      options={{}}
+      protocol="https:"
+      tweetId="692527862369357824"
+    />
 
 ## calls twttr api
 
@@ -15,14 +26,3 @@ Generated by [AVA](https://ava.li).
         myOption: 1,
       },
     ]
-
-## renders
-
-> Snapshot 1
-
-    <TweetEmbed⍟
-      className="tweet"
-      id="692527862369357824"
-      options={{}}
-      protocol="https:"
-    />

src/tweet-embed.spec.js.md

@@ -16,7 +16,7 @@ function addScript(src: string, cb: () => any) {
 }
 
 interface ITweetEmbedProps {
-  id: string
+  tweetId: string
   options?: object
   placeholder?: string | React.ReactNode
   protocol?: string
@@ -32,8 +32,9 @@ interface ITweetEmbedState {
 class TweetEmbed extends React.Component<ITweetEmbedProps> {
   _div?: HTMLDivElement
   static propTypes = {
-    id: PropTypes.string,
+    tweetId: PropTypes.string,
     options: PropTypes.object,
+    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     protocol: PropTypes.string,
     onTweetLoadSuccess: PropTypes.func,
     onTweetLoadError: PropTypes.func,
@@ -60,7 +61,7 @@ class TweetEmbed extends React.Component<ITweetEmbedProps> {
 
         const { options, onTweetLoadSuccess, onTweetLoadError } = props
         widgets
-          .createTweetEmbed(this.props.id, this._div, options)
+          .createTweetEmbed(this.props.tweetId, this._div, options)
           .then((twitterWidgetElement) => {
             this.setState({
               isLoading: false
@@ -91,23 +92,32 @@ class TweetEmbed extends React.Component<ITweetEmbedProps> {
     nextState: ITweetEmbedState
   ) {
     return (
-      this.props.id !== nextProps.id ||
+      this.props.tweetId !== nextProps.tweetId ||
       this.props.className !== nextProps.className
     )
   }
 
   componentWillUpdate(nextProps, nextState) {
-    if (this.props.id !== nextProps.id) {
+    if (this.props.tweetId !== nextProps.tweetId) {
       this.loadTweetForProps(nextProps)
     }
   }
 
   render() {
     const { props, state } = this
-
+    const {
+      tweetId,
+      onTweetLoadError,
+      onTweetLoadSuccess,
+      options,
+      children,
+      placeholder,
+      protocol,
+      ...restProps
+    } = props
     return (
       <div
-        className={this.props.className}
+        {...restProps}
         ref={(c) => {
           this._div = c
         }}