build: tweaks (#372)

* build: tweaks

* build: downgrade eslint

* refactor: use createRoot

* test: update snapshot

* build: add lock file

.npmrc

@@ -1,4 +1,3 @@
-enable-pre-post-scripts=true
 package-lock=false
 save-prefix=~
 save=false

package.json

@@ -35,7 +35,7 @@
     "@ksmithut/prettier-standard": "latest",
     "@lerna-lite/cli": "latest",
     "@lerna-lite/publish": "latest",
-    "eslint": "latest",
+    "eslint": "8",
     "eslint-config-next": "latest",
     "finepack": "latest",
     "git-authors-cli": "latest",
@@ -66,7 +66,12 @@
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
-    ]
+    ],
+    "rules": {
+      "body-max-line-length": [
+        0
+      ]
+    }
   },
   "eslintConfig": {
     "extends": "eslint-config-next",

packages/hover-vanilla/src/index.js

@@ -1,7 +1,7 @@
 import MicrolinkHover from '@microlink/hover-react'
 import localhostUrl from 'localhost-url-regex'
+import { createRoot } from 'react-dom'
 import styled from 'styled-components'
-import ReactDOM from 'react-dom'
 import React from 'react'
 
 function toArray (input) {
@@ -36,7 +36,7 @@ function parseObject (obj) {
 
 function microlink (selector, opts, rootNode) {
   return toArray(selector).forEach(function (el) {
-    ReactDOM.render(
+    createRoot(rootNode || el).render(
       React.createElement(
         MicrolinkHover.withHover,
         Object.assign(
@@ -49,8 +49,7 @@ function microlink (selector, opts, rootNode) {
           opts,
           parseObject(el.dataset)
         )
-      ),
-      rootNode || el
+      )
     )
   })
 }

packages/react/test/snapshots/build.mjs.md

@@ -51,7 +51,7 @@ Generated by [AVA](https://avajs.dev).
           size: 'normal'␊
         }␊
       },␊
-      fetchFromApi: [AsyncFunction: u],␊
+      fetchFromApi: [AsyncFunction: fetchFromApi],␊
       getApiUrl: [Function: getApiUrl],␊
       imageProxy: [Function: imageProxy]␊
     }`

packages/vanilla/src/index.js

@@ -1,6 +1,6 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
 import Microlink from '@microlink/react'
+import { createRoot } from 'react-dom'
+import React from 'react'
 
 function parseJSON (value) {
   try {
@@ -28,8 +28,7 @@ function toArray (input) {
 function microlink (selector, opts, rootNode) {
   return toArray(selector).forEach(function (el) {
     el.classList.add('microlink_vanilla')
-
-    ReactDOM.render(
+    createRoot(rootNode || el).render(
       React.createElement(
         Microlink,
         Object.assign(
@@ -40,8 +39,7 @@ function microlink (selector, opts, rootNode) {
           opts,
           parseObject(el.dataset)
         )
-      ),
-      rootNode || el
+      )
     )
   })
 }