Removed extra subpackage 'types' ... plus minor changes

Author: mcjazzyfunky

.storybook/webpack.config.js

@@ -18,10 +18,6 @@ module.exports = ({ config }) => {
     __dirname,
     '../src/main/js-elements-hooks.ts'
   )
-  alias['js-elements/types$'] = path.resolve(
-    __dirname,
-    '../src/main/js-elements-types.ts'
-  )
   alias['js-elements/utils$'] = path.resolve(
     __dirname,
     '../src/main/js-elements-utils.ts'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-elements",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "main": "./index.js",
   "module": "./dist/js-elements.esm.production.js",
@@ -66,41 +66,20 @@
         "require": "./dist/js-elements-utils.cjs.production.js"
       }
     },
-    "./types": {
-      "development": {
-        "browser": "./dist/js-elements-types.umd.development.js",
-        "umd": "./dist/js-elements-types.umd.development.js",
-        "import": "./dist/js-elements-types.esm.development.js",
-        "require": "./dist/js-elements-types.cjs.development.js"
-      },
-      "production": {
-        "browser": "./dist/js-elements-types.umd.production.js",
-        "umd": "./dist/js-elements-types.umd.production.js",
-        "import": "./dist/js-elements-types.esm.production.js",
-        "require": "./dist/js-elements-types.cjs.production.js"
-      },
-      "default": {
-        "browser": "./dist/js-elements-types.umd.production.js",
-        "umd": "./dist/js-elements-types.umd.production.js",
-        "import": "./dist/js-elements-types.esm.production.js",
-        "require": "./dist/js-elements-types.cjs.production.js"
-      }
-    },
     "./package.json": "./package.json",
     "./": "./"
   },
   "files": [
     "dist",
     "hooks",
-    "utils",
-    "types"
+    "utils"
   ],
   "scripts": {
     "clean": "shx rm -rf ./build ./dist",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build": "npm run clean && cross-env NODE_OPTIONS=--max_old_space_size=4096 rollup --c rollup.config.js && tsc -p tsconfig.dist.json -d --emitDeclarationOnly --declarationDir dist/types",
+    "build": "npm run clean && cross-env NODE_OPTIONS=--max_old_space_size=4096 rollup --c rollup.config.js && tsc -p tsconfig.dist.json -d --emitDeclarationOnly --declarationDir dist/types && shx cp ./src/main/jsx.d.ts ./dist/types",
     "dist": "npm run build && npm run zipsource",
     "zipsource": "shx rm -rf ./build/source && shx mkdir -p ./build/source && copyfiles -a ./* ./build/source && shx cp -r ./src ./build/source && shx mkdir -p ./dist/source && cd build && bestzip --force node ../dist/source/source.zip source && cd .."
   },
@@ -123,7 +102,7 @@
     "bestzip": "^2.1.7",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "eslint": "^7.16.0",
+    "eslint": "^7.17.0",
     "htm": "^3.0.4",
     "html-webpack-plugin": "^5.0.0-alpha.17",
     "js-immutables": "^0.0.5",
@@ -140,7 +119,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "rxjs": "^6.6.3",
     "shx": "^0.3.3",
-    "ts-loader": "^8.0.12",
+    "ts-loader": "^8.0.13",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3"
   }

rollup.config.js

@@ -7,7 +7,7 @@ import gzip from 'rollup-plugin-gzip'
 
 const configs = []
 
-for (const pkg of ['root', 'hooks', 'utils', 'types']) {
+for (const pkg of ['root', 'hooks', 'utils']) {
   for (const format of ['esm', 'umd', 'cjs']) {
     for (const productive of [false, true]) {
       configs.push(createConfig(pkg, format, productive))

src/main/js-elements-types.ts

@@ -1,2 +1,12 @@
 export { define, attr } from './core/base'
 export { h, html, render } from './core/vdom'
+
+export {
+  Component,
+  EventHandler,
+  MethodsOf,
+  Ref,
+  UIEvent,
+  VNode,
+  VElement
+} from './core/types'

src/main/js-elements.ts

@@ -1,4 +1,5 @@
-import { Props, VElement } from './core/types'
+export type Props = Record<string, any> // TODO
+export type VElement<T extends Props = Props> = Record<any, any> // TODO
 
 export = JSX
 

src/main/jsx.d.ts

@@ -1,6 +1,5 @@
-import { attr, define, h } from 'js-elements'
+import { attr, define, h, EventHandler, UIEvent } from 'js-elements'
 import { useEmitter, useStyles } from 'js-elements/hooks'
-import { EventHandler, UIEvent } from 'js-elements/types'
 import { createEvent } from 'js-elements/utils'
 
 const buttonDemoStyles = ` 

src/stories/demos/button-demo.tsx

@@ -1,6 +1,5 @@
-import { define, h } from 'js-elements'
+import { define, h, MethodsOf, EventHandler, Ref, UIEvent } from 'js-elements'
 import { createEvent, createRef } from 'js-elements/utils'
-import { EventHandler, MethodsOf, Ref, UIEvent } from 'js-elements/types'
 
 import {
   useEffect,

src/stories/demos/complex-counter-demo.tsx

@@ -0,0 +1,92 @@
+import { define, h, VNode } from 'js-elements'
+import { useRefresher, useInterval, useStyles } from 'js-elements/hooks'
+
+export default define('data-table-demo', () => {
+  return () => <DataTable />
+})
+
+type DataTableViewModel = {
+  columns: {
+    title: string
+  }[]
+}
+
+const DataTable = define('jsc-data-table', () => {
+  const refresh = useRefresher()
+
+  const viewModel: DataTableViewModel = {
+    columns: [
+      { title: 'Column 1' },
+      { title: 'Column 2' },
+      { title: 'Column 3' },
+      { title: 'Column 4' },
+      { title: 'Column 5' },
+      { title: 'Column 6' },
+      { title: 'Column 7' },
+      { title: 'Column 8' }
+    ]
+  }
+
+  useStyles(dataTableStyles)
+  useInterval(refresh, 1000)
+
+  return () => {
+    return renderTable(viewModel)
+  }
+})
+
+function renderTable(viewModel: DataTableViewModel): VNode {
+  const tableHeader = renderTableHeader(viewModel)
+  const tableBody = renderTableBody(viewModel)
+
+  return (
+    <table>
+      {tableHeader}
+      {tableBody}
+    </table>
+  )
+}
+
+function renderTableHeader(viewModel: DataTableViewModel): VNode {
+  const headerColumns: VNode[] = []
+
+  for (const column of viewModel.columns) {
+    headerColumns.push(<th>{column.title}</th>)
+  }
+
+  return (
+    <thead>
+      <tr>{headerColumns}</tr>
+    </thead>
+  )
+}
+
+function renderTableBody(viewModel: DataTableViewModel) {
+  const rows: VNode[] = []
+
+  for (let i = 0; i < 100; ++i) {
+    const cols: VNode[] = []
+
+    rows.push(<tr>{cols}</tr>)
+
+    for (let j = 0; j < viewModel.columns.length; ++j) {
+      cols.push(<td>{Math.floor(Math.random() * 10000)}</td>)
+    }
+  }
+
+  return <tbody>{rows}</tbody>
+}
+
+// === styles ========================================================
+
+const dataTableStyles = `
+  table {
+    border: 1px solid black;
+  }
+
+  table tbody tr td {
+    border-width: 0 0 1px 0;
+    border-color: gray;
+    border-width: 1px;
+  }
+`

src/stories/demos/data-table-demo.tsx

@@ -0,0 +1,66 @@
+import { attr, define, h, VNode } from 'js-elements'
+import { useState, useStyles } from 'js-elements/hooks'
+
+export default define('date-picker-demo', () => {
+  return () => <DatePicker />
+})
+
+// === types ========================================================
+
+type DatePickerViewModel = {
+  firstDayOfWeek: number
+  showWeekNumbers: boolean
+  shownYear: number
+  shownMonth: number
+}
+
+// === DatePicker ====================================================
+
+class DatePickerProps {}
+
+const DatePicker = define('jsc-date-picker', DatePickerProps, (p) => {
+  const [s, set] = useState({
+    selectedDate: new Date()
+  })
+
+  useStyles(datePickerStyles)
+
+  return () => {
+    const model: DatePickerViewModel = {
+      firstDayOfWeek: 0,
+      showWeekNumbers: true,
+      shownMonth: 11,
+      shownYear: 2020
+    }
+
+    return renderCalendar(model)
+  }
+})
+
+function renderCalendar(model: DatePickerViewModel): VNode {
+  const rows: VNode[] = []
+
+  const ret = (
+    <table>
+      <tbody>{rows}</tbody>
+    </table>
+  )
+
+  for (let weekIdx = 0; weekIdx < 5; ++weekIdx) {
+    const cols: VNode[] = []
+
+    rows.push(<tr>{cols}</tr>)
+
+    for (let dayIdx = 0; dayIdx < 7; ++dayIdx) {
+      const dayOfMonth = new Date(model.shownYear, model.shownMonth, 1)
+
+      cols.push(<td>{dayOfMonth}</td>)
+    }
+  }
+
+  return ret
+}
+
+const datePickerStyles = `
+
+`