website: update website code preview.

.github/workflows/ci.yml

@@ -17,13 +17,14 @@ jobs:
     - run: npm install
     - run: npm run build
     - run: npm run doc
-    - run: npm run test:coverage
+    - run: npm run coverage
+    - run: cp -rp ./core/coverage www/build
 
     - name: Create Tag
       id: create_tag
       uses: jaywcjlove/create-tag-action@main
       with:
-        package-path: ./package.json
+        package-path: ./core/package.json
 
     - name: Generate Changelog
       id: changelog
@@ -38,7 +39,7 @@ jobs:
       uses: peaceiris/actions-gh-pages@v3
       with:
         github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./build
+        publish_dir: ./www/build
 
     - name: Create Release
       uses: ncipollo/release-action@v1
@@ -64,6 +65,7 @@ jobs:
     - run: npm publish --access public
       name: 📦 @uiw/react-only-when publish to NPM
       continue-on-error: true
+      working-directory: core
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
     # - run: npm install @jsdevtools/npm-publish -g

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+  "*.{js,jsx,tsx,ts,less,md,json}": [
+    "prettier --write"
+  ]
+}

.prettierignore

@@ -6,6 +6,7 @@ package.json
 node_modules
 dist
 build
+lib
 cjs
 esm
 test

.prettierrc

@@ -6,6 +6,22 @@
     {
       "files": ".prettierrc",
       "options": { "parser": "json" }
+    },
+    {
+      "files": "*.{js,jsx}",
+      "options": { "parser": "babel" }
+    },
+    {
+      "files": "*.{ts,tsx}",
+      "options": { "parser": "babel-ts" }
+    },
+    {
+      "files": "*.{ts,tsx}",
+      "options": { "parser": "typescript" }
+    },
+    {
+      "files": "*.{less,css}",
+      "options": { "parser": "css" }
     }
   ]
 }

README.md

@@ -0,0 +1 @@
+./core/README.md

core/README.md

@@ -0,0 +1,120 @@
+react-only-when
+===
+
+[![Build & Deploy](https://github.com/uiwjs/react-only-when/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-only-when/actions/workflows/ci.yml) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-only-when)](https://www.npmjs.com/package/@uiw/react-only-when) [![npm version](https://img.shields.io/npm/v/@uiw/react-only-when.svg)](https://www.npmjs.com/package/@uiw/react-only-when) [![Coverage Status](https://coveralls.io/repos/github/uiwjs/react-only-when/badge.svg?branch=main)](https://coveralls.io/github/uiwjs/react-only-when?branch=main)
+
+A declarative component for conditional rendering. Copy [`react-only-when`](https://github.com/sag1v/react-only-when), let it support TypeScript.
+
+## Quick Start
+
+```bash
+$ npm install --save @uiw/react-only-when
+```
+
+## Usage
+
+```jsx
+import Only from '@uiw/react-only-when'
+
+<Only when={true}>
+  <h1>Here I Am</h1>
+</Only>
+```
+
+## \<If>
+
+React component that renders the children if the `condition` prop is `true`.
+
+```jsx
+import { If } from '@uiw/react-only-when';
+// Or
+import { If } from '@uiw/react-only-when/if'
+
+<div>
+  <If
+    condition={props.error}
+    render={() => (
+      <h1>{props.error}</h1>
+    )}
+  />
+  <If condition={props.error}>
+    <h1>{props.error}</h1>
+  </If>
+</div>
+```
+
+Or you could just use plain JavaScript:
+
+```jsx
+<div>
+  {props.error && (
+    <h1>{props.error}</h1>
+  )}
+</div>
+```
+
+## Example
+
+```jsx mdx:preview&background=#fff&codePen=true
+import React, { useState } from 'react';
+import Only from '@uiw/react-only-when';
+
+export default function App() {
+  const [show, setShow] = useState(true)
+  return (
+    <div className="app">
+      <button onClick={() => setShow(!show)}>Toggle</button>
+      <Only when={show}>
+        <h1>Here I Am</h1>
+      </Only>
+    </div>
+  )
+}
+```
+
+## props
+
+| prop name  | type | default | isRequired | description |
+| ----- | ----- | ----- | ----- | ----- |
+| children | react element | `null` | `true` | A single child element |
+| when | bool | `false` | `true` | When true, children will rendered as is |
+| hiddenMode | string | `null`   | `false` | Determines how children should be hidden |
+| className  | string | `r-o_hidden` | `false` | This is working in combination with `hiddenMode={"css"}` |
+
+### hiddenMode enum
+
+| hiddenMode | description |
+| ----- | ----- |
+| `null` | Will not render the child |
+| `display` | Will render the child with `display:none` |
+| `visibility` | Will render the child with `visibility:hidden` |
+| `css` | Will render the child with a CSS class (you can pass it a custom `className` prop) |
+
+
+## Development
+
+Runs the project in development mode.  
+
+```bash
+# Step 1, run first, listen to the component compile and output the .js file
+# listen for compilation output type .d.ts file
+npm run watch
+# Step 2, development mode, listen to compile preview website instance
+npm run start
+```
+
+**production**
+
+Builds the app for production to the build folder.
+
+```bash
+npm run build
+```
+
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
+
+
+## License
+
+MIT © [`sag1v`](https://github.com/sag1v) & [`uiwjs`](https://github.com/uiwjs)

if.d.ts → core/if.d.ts

@@ -1,10 +1,9 @@
-
 declare module '@uiw/react-only-when/if' {
-  import { ReactElement } from "react";
-  import { FC, PropsWithChildren } from "react";
+  import { ReactElement } from 'react';
+  import { FC, PropsWithChildren } from 'react';
   export interface IfProps {
     readonly condition?: boolean;
     readonly render?: () => ReactElement;
   }
   export const If: FC<PropsWithChildren<IfProps>>;
-}
+}