main.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import createStore from './src'
import { xv } from 'xanv';

const rows = [
  {
    container: "ROOT",
    name: "nax",
    email: "nax@gamil.com",
    // age: 10
  },
  {
    container: "ROOT",
    name: "nax",
    email: "nax@gamil.com",
    age: 10
  },
  {
    container: "ROOT",
    name: "nax",
    email: "nax1@gamil.com",
    age: 3
  },
  {
    container: "service",
    name: "nax",
    email: "nax1@gamil.com",
    age: 4
  },
  {
    container: "service",
    name: "najrul",
    email: "najrul@gamil.com",
    age: 30
  },
  {
    container: "service",
    name: "nax1",
    email: "nax1@gamil.com",
    age: 40
  }
]


const store = createStore({
  container: xv.string(),
  name: xv.string().min(3).max(50),
  email: xv.string().min(5).max(100),
  age: xv.number().optional().min(1).max(150)
}, {
  appName: xv.string().default("React Rock App"),
  version: xv.string().default("1.0.0")
})

const d = store.createMany({
  disableObservation: false,
  data: rows
})

function A() {
  const [email, setEmail] = React.useState("nax@gamil.com")
  const all = store.find({
    where: {
      container: "service"
    }
  })

  console.log(all);


  return (
    <div>
      {all.map((item, idx: any) => {
        return (
          <li key={idx}>#{item.rid} - {item.email} - {item.name} {item.vid}</li>
        )
      })}
      <button
        onClick={() => {
          setEmail("nax1@gamil.com")
        }}
      >Set Email</button>
    </div>
  )
}


const App = () => {
  return (
    <div>
      <A />
      <button
        onClick={() => {
          store.create({
            data: {
              name: Math.random().toString(),
              email: `${Math.random().toString()}@gmail.com`,
              age: 20
            }
          })
        }}
      >Add+</button>
      <button
        onClick={() => {
          store.update({
            data: {
              email: `${Math.random().toString().substring(2, 5)}@gmail.com`,
            },
            where: {
              name: "nax1"
            }
          })
        }}
      >UPDATE</button>
      <button
        onClick={() => {
          store.delete({
            where: {
              name: "nax"
            }
          })
        }}
      >Delete</button>
    </div>
  );
};




const rootEle = document.getElementById('root')
if (rootEle) {
  const root = createRoot(rootEle);
  root.render(<App />);
}