Initial commit

Author: tujoworker

.gitignore

@@ -0,0 +1,30 @@
+# dependencies
+/node_modules
+node_modules/
+
+# testing
+/coverage
+
+# misc
+package-lock.json
+completions.json
+.DS_Store
+.history
+*not_in_use*
+/packages/dnb-ui-lib
+
+# pkm
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.yarn/*
+.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# enviroment
+.env
+.env.*

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 75,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "semi": false,
+  "bracketSameLine": false,
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": ".yarnrc.yml",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

.yarn/releases/yarn-3.2.0.cjs

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.19.cjs"

.yarnrc

@@ -0,0 +1,9 @@
+defaultSemverRangePrefix: ""
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+pnpMode: loose
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

.yarnrc.yml

@@ -0,0 +1,37 @@
+"Commons Clause" License Condition v1.0
+
+The Software is provided to you by the Licensor under the License,
+as defined below, subject to the following condition.
+
+Without limiting other conditions in the License,
+the grant of rights under the License will not include,
+and the License does not grant to you,
+the right to Sell the Software.
+
+For purposes of the foregoing, “Sell” means practicing any
+or all of the rights granted to you under the License
+to provide to third parties,
+for a fee or other consideration
+(including without limitation fees for hosting
+or consulting/ support services related to the Software),
+a product or service whose value derives,
+entirely or substantially, from the functionality of the Software.
+Any license notice or attribution required by
+the License must also include this
+Commons Cause License Condition notice.
+
+https://commonsclause.com/
+
+Software: DNB Design System (Eufemia)
+License: Apache 2.0 with Commons Clause
+Licensor: DNB Bank ASA, Org nr. 984 851 006
+
+Copyright (c) 2018-present DNB.no, https://www.dnb.no/
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

LICENSE

@@ -0,0 +1,28 @@
+# Babel Plugin to enhance React Live syntax
+
+[React Live](https://github.com/FormidableLabs/react-live) only supports code as a string. This Babel Plugin uses AST to transform JavaScript and TypeScript code to a string.
+
+This allows the given "source code" to be fully typed (TypeScript).
+
+## How to use
+
+Install `babel-plugin-react-live` and add it to your Babel config.
+
+```json
+{
+  "plugins": [
+    [
+      "babel-plugin-react-live",
+      {
+        "componentName": "YourComponent",
+        "filesToMatch": ["Examples.tsx"],
+        "prettierPath": "./.prettierrc"
+      }
+    ]
+  ]
+}
+```
+
+## How it works
+
+It uses AST to transform related code to a string.

README.md

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const ComponentBox = ({ children }) => children
+
+export const MockNoInlineWithComponent = () => {
+  return (
+    <ComponentBox data-test="id">
+      {() => {
+        const DemoComponent = () => {
+          return <>content</>
+        }
+
+        return <DemoComponent />
+      }}
+    </ComponentBox>
+  )
+}
+
+export const MockNoInlineWithText = () => {
+  return (
+    <ComponentBox data-test="id">
+      {() => {
+        return <>content</>
+      }}
+    </ComponentBox>
+  )
+}
+
+export const MockOneChilds = () => {
+  return (
+    <ComponentBox data-test="id">
+      <div>content</div>
+    </ComponentBox>
+  )
+}
+
+export const MockManyChilds = () => {
+  return (
+    <ComponentBox data-test="id">
+      <div>content 1</div>
+      <div>content 2</div>
+      <div>content 3</div>
+    </ComponentBox>
+  )
+}

__mocks__/Examples.tsx

@@ -0,0 +1,80 @@
+/**
+ * Babel Plugin Test
+ *
+ */
+
+import { transformFileAsync } from '@babel/core'
+import nodePath from 'path'
+import prettier from 'prettier'
+import babelPluginReactLive from '../babelPluginReactLive'
+
+const targetFile = nodePath.resolve(__dirname, '../__mocks__/Examples.tsx')
+const prettierPath = nodePath.resolve(__dirname, '../.prettierrc')
+const pluginOptions = {
+  componentName: 'ComponentBox',
+  filesToMatch: ['Examples.tsx'],
+  prettierPath,
+}
+
+it('babelPluginReactLive', async () => {
+  const babelFileResult = await transformFileAsync(targetFile, {
+    code: true,
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          modules: false,
+          targets: { firefox: '100' },
+        },
+      ],
+    ],
+    plugins: [[babelPluginReactLive, pluginOptions]],
+  })
+
+  const code = String(babelFileResult?.code)
+
+  const formattedCode = prettier.format(code, {
+    filepath: 'file.tsx',
+    semi: false,
+  })
+
+  expect(formattedCode).toMatchInlineSnapshot(`
+      "const ComponentBox = ({ children }) => children
+      export const MockNoInlineWithComponent = () => {
+        return (
+          <ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
+        return <>content</>
+      }
+      render(<DemoComponent />)
+      \`}</ComponentBox>
+        )
+      }
+      export const MockNoInlineWithText = () => {
+        return (
+          <ComponentBox data-test="id" noInline>{\`render(<>content</>)
+      \`}</ComponentBox>
+        )
+      }
+      export const MockOneChilds = () => {
+        return (
+          <ComponentBox data-test="id">{\`<div>content</div>
+      \`}</ComponentBox>
+        )
+      }
+      export const MockManyChilds = () => {
+        return (
+          <ComponentBox data-test="id">{\`<>
+        <div>content 1</div>
+        <div>content 2</div>
+        <div>content 3</div>
+      </>
+      \`}</ComponentBox>
+        )
+      }
+      "
+    `)
+
+  expect(formattedCode.match(/noInline/g)).toHaveLength(2)
+  expect(formattedCode.match(/\{`/g)).toHaveLength(4)
+  expect(formattedCode.match(/`\}/g)).toHaveLength(4)
+})

__tests__/babelPluginReactLive.test.ts

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
+    '@babel/preset-react',
+  ],
+}