Localize JSX namespace to Purview (karthikv#40)

Author: brianmullinorum

src/component.ts

@@ -1,6 +1,7 @@
 import { nanoid } from "nanoid"
 import { StateTree, ChildMap, EventHandler } from "./purview"
 import { PNodeRegular } from "./types/ws"
+import { JSX } from "./purview"
 
 type UpdateFn<S> = (state: Readonly<S>) => Partial<S>
 

src/css.tsx

@@ -1,8 +1,9 @@
+import { JSX } from "./purview"
 import { Properties, SimplePseudos } from "csstype"
 import { expandProperty } from "inline-style-expand-shorthand"
 import { lexer } from "css-tree"
 import * as LRU from "lru-cache"
-import * as Purview from "./purview"
+import Purview, { Component } from "./purview"
 import { isPseudoClass } from "./pseudo_classes"
 
 type OptionalProperties = {
@@ -169,7 +170,7 @@ export function styledTag<K extends keyof JSX.IntrinsicElements>(
   // Even though this is a string, it must be uppercase for JSX.
   Tag: K,
   ...baseCSSProperties: CSSProperties[]
-): new (props: JSX.IntrinsicElements[K]) => Purview.Component<
+): new (props: JSX.IntrinsicElements[K]) => Component<
   JSX.IntrinsicElements[K],
   {}
 > {

src/examples/animation.tsx

@@ -1,4 +1,4 @@
-import Purview, { css } from "../purview"
+import Purview, { css, JSX } from "../purview"
 
 interface AnimationState {
   visible: boolean

src/examples/app.tsx

@@ -1,4 +1,4 @@
-import Purview, { ChangeEvent, css, styledTag } from "../purview"
+import Purview, { ChangeEvent, css, JSX, styledTag } from "../purview"
 import Animation from "./animation"
 
 interface AppState {

src/examples/counter.tsx

@@ -1,6 +1,6 @@
 // Normally you'd import from "purview". We use "../purview" here since we're in
 // the Purview codebase.
-import Purview from "../purview"
+import Purview, { JSX } from "../purview"
 import { Sequelize, QueryTypes, DataTypes } from "sequelize"
 import * as http from "http"
 import * as express from "express"

src/examples/simple.tsx

@@ -1,5 +1,5 @@
 import * as http from "http"
-import Purview, { InputEvent } from "../purview"
+import Purview, { InputEvent, JSX } from "../purview"
 import * as express from "express"
 
 // (1) Write components by extending Purview.Component. The two type parameters

src/helpers.ts

@@ -1,5 +1,8 @@
 import { Attrs } from "snabbdom/modules/attributes"
 import { PNodeRegular, PNode } from "./types/ws"
+import { JSX } from "./purview"
+
+export interface NestedArray<T> extends Array<NestedArray<T> | T> {}
 
 type EventAttribute = keyof JSX.DOMAttributes
 

src/namespace.ts

@@ -0,0 +1,21 @@
+import {
+  createElem as createElemInternal,
+  handleWebSocket as handleWebSocketInternal,
+  render as renderInternal,
+  renderCSS as renderCSSInternal,
+  Component as ComponentInternal,
+  scriptPath as scriptPathInternal,
+  reloadOptions as reloadOptionsInternal,
+  JSX as JSXInternal,
+} from "./purview"
+
+export namespace Purview {
+  export let createElem = createElemInternal
+  export let handleWebSocket = handleWebSocketInternal
+  export let render = renderInternal
+  export let renderCSS = renderCSSInternal
+  export let Component = ComponentInternal
+  export let scriptPath = scriptPathInternal
+  export let reloadOptions = reloadOptionsInternal
+  export import JSX = JSXInternal
+}

src/purview.ts

@@ -7,6 +7,7 @@ import * as t from "io-ts"
 
 import Component, { ComponentConstructor } from "./component"
 import {
+  NestedArray,
   tryParseJSON,
   mapNested,
   isEventAttr,
@@ -43,6 +44,7 @@ import {
   generateRule,
   getAtomicProperties,
 } from "./css"
+import { JSX } from "./types/jsx"
 import { EVENT_HANDLER_GRACE_PERIOD_MS } from "./constants"
 
 export interface RenderOptions {
@@ -173,9 +175,9 @@ const RENDER_CSS_NOT_CALLED_ERROR =
 export function createElem(
   nodeName: string | ComponentConstructor<any, any>,
   attributes:
-    | (JSX.InputHTMLAttributes<any> &
-        JSX.TextareaHTMLAttributes<any> &
-        JSX.OptionHTMLAttributes<any>)
+    | (JSX.InputHTMLAttributes &
+        JSX.TextareaHTMLAttributes &
+        JSX.OptionHTMLAttributes)
     | null,
   ...children: NestedArray<JSX.Child>
 ): JSX.Element {
@@ -850,12 +852,10 @@ async function makeRegularElem(
           }
 
           if (nodeName === "input") {
-            const type = (attributes as JSX.InputHTMLAttributes<any>)
-              .type as string
+            const type = (attributes as JSX.InputHTMLAttributes).type as string
             validator = makeValidator(INPUT_TYPE_VALIDATOR[type] || t.string)
           } else if (nodeName === "select") {
-            const multiple = (attributes as JSX.SelectHTMLAttributes<any>)
-              .multiple
+            const multiple = (attributes as JSX.SelectHTMLAttributes).multiple
             validator = makeValidator(multiple ? t.array(t.string) : t.string)
           } else if (nodeName === "textarea") {
             validator = makeValidator(t.string)
@@ -1266,16 +1266,11 @@ export const scriptPath = pathLib.resolve(
   "browser.js",
 )
 
-// Export all values above on the default object as well.
-export default {
-  createElem,
-  handleWebSocket,
-  render,
-  renderCSS,
-  Component,
-  scriptPath,
-  reloadOptions,
-}
+// Export all values above on the default object as well. Do this through
+// a namespace so we can use a locally scoped JSX namespace:
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#locally-scoped-jsx-namespaces
+import { Purview } from "./namespace"
+export default Purview
 
 // Export relevant types.
 export {
@@ -1286,4 +1281,4 @@ export {
   PurviewEvent,
 } from "./types/ws"
 export { css, styledTag, CSS } from "./css"
-export * from "./types/jsx"
+export { JSX, NestedArray }