From 8a3d9acd8b80ea5570021e002fb29a82c8ac9e13 Mon Sep 17 00:00:00 2001 From: Agney Date: Mon, 15 Mar 2021 00:58:20 +0530 Subject: [PATCH] Add no check for all files referencing theme This is very poor as a solution. But typescript builds are not respecting the typeRootsArray in tsconfig and hence leading to Property 'theme' does not exist on type 'IProps & { children?: ReactNode; } & DefaultTheme' error --- playground/package.json | 4 ++-- playground/src/Draggable/index.tsx | 9 +++++---- playground/src/Editor/EditorSetup.tsx | 1 + playground/src/Playground.tsx | 3 ++- playground/src/Result/Console.tsx | 5 +++-- playground/src/Result/ErrorDisplay.tsx | 7 ++++--- playground/{ => src}/types/goober.d.ts | 2 +- playground/tsconfig.json | 8 +++++--- playground/types/babel-plugin-unpkg.d.ts | 1 - playground/types/babel-standalone.d.ts | 1 - playground/types/iframe.d.ts | 12 ------------ playground/types/react-inspector.d.ts | 1 - 12 files changed, 23 insertions(+), 31 deletions(-) rename playground/{ => src}/types/goober.d.ts (74%) delete mode 100644 playground/types/babel-plugin-unpkg.d.ts delete mode 100644 playground/types/babel-standalone.d.ts delete mode 100644 playground/types/iframe.d.ts delete mode 100644 playground/types/react-inspector.d.ts diff --git a/playground/package.json b/playground/package.json index 5650be0..d92c51f 100644 --- a/playground/package.json +++ b/playground/package.json @@ -4,8 +4,8 @@ "description": "A simple playground for HTML, CSS and JavaScript supporting module imports.", "private": false, "scripts": { - "start": "microbundle watch", - "build": "microbundle", + "start": "microbundle watch --jsx React.createElement", + "build": "microbundle --jsx React.createElement", "test": "jest", "prepublishOnly": "yarn build", "release": "np" diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx index c134c72..f0fcef9 100644 --- a/playground/src/Draggable/index.tsx +++ b/playground/src/Draggable/index.tsx @@ -1,18 +1,19 @@ +// @ts-nocheck import React, { FC, ReactNode, useRef, forwardRef } from "react"; import { styled } from "goober"; import useDrag from "./useDrag"; import { useTheme } from "../utils/ThemeProvider"; -const Container = styled('div', forwardRef)` +const Container = styled("div", forwardRef)` display: flex; align-items: stretch; `; -const Divider = styled('div', forwardRef)` - width: ${props => props.theme.divider.width}px; +const Divider = styled("div", forwardRef)` + width: ${(props) => props.theme.divider.width}px; cursor: col-resize; - background-color: ${props => props.theme.divider.background}; + background-color: ${(props) => props.theme.divider.background}; `; interface IProps { diff --git a/playground/src/Editor/EditorSetup.tsx b/playground/src/Editor/EditorSetup.tsx index 08acfab..9ba4be1 100644 --- a/playground/src/Editor/EditorSetup.tsx +++ b/playground/src/Editor/EditorSetup.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { FC, Fragment } from "react"; import SimpleEditor from "react-simple-code-editor"; import Highlight, { defaultProps } from "prism-react-renderer"; diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx index 425aa20..2a3fe7c 100644 --- a/playground/src/Playground.tsx +++ b/playground/src/Playground.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { FC, useState, createElement } from "react"; import { useId } from "@reach/auto-id"; import { styled, setup, DefaultTheme } from "goober"; @@ -7,7 +8,7 @@ import "@reach/tabs/styles.css"; import Editor from "./Editor"; import Result from "./Result"; import { ISnippet, IEditorTabs, IResultTabs } from "./types"; -import { ThemeProvider, useTheme } from './utils/ThemeProvider'; +import { ThemeProvider, useTheme } from "./utils/ThemeProvider"; import { ColorMode } from "./utils/theme"; import media from "./utils/media"; import Draggable from "./Draggable"; diff --git a/playground/src/Result/Console.tsx b/playground/src/Result/Console.tsx index ad51b50..ca2c950 100644 --- a/playground/src/Result/Console.tsx +++ b/playground/src/Result/Console.tsx @@ -1,9 +1,10 @@ +// @ts-nocheck import React, { FC } from "react"; import { styled } from "goober"; import Inspector from "@agney/react-inspector"; -const Container = styled('div')` - background-color: ${props => props.theme.console.background}; +const Container = styled("div")` + background-color: ${(props) => props.theme.console.background}; height: 100%; li { diff --git a/playground/src/Result/ErrorDisplay.tsx b/playground/src/Result/ErrorDisplay.tsx index 65aeaf5..cf96b42 100644 --- a/playground/src/Result/ErrorDisplay.tsx +++ b/playground/src/Result/ErrorDisplay.tsx @@ -1,9 +1,10 @@ +// @ts-nocheck import React, { FC } from "react"; import { styled } from "goober"; -const Container = styled('div')` - background-color: ${props => props.theme.error.background}; - color: ${props => props.theme.error.color}; +const Container = styled("div")` + background-color: ${(props) => props.theme.error.background}; + color: ${(props) => props.theme.error.color}; padding: 0.2em 0.5em; position: absolute; width: 100%; diff --git a/playground/types/goober.d.ts b/playground/src/types/goober.d.ts similarity index 74% rename from playground/types/goober.d.ts rename to playground/src/types/goober.d.ts index 7e3cdb7..b30ddcd 100644 --- a/playground/types/goober.d.ts +++ b/playground/src/types/goober.d.ts @@ -1,6 +1,6 @@ import "goober"; -import { theme } from "../src/utils/theme"; +import { theme } from "../utils/theme"; declare module "goober" { type OurTheme = typeof theme; diff --git a/playground/tsconfig.json b/playground/tsconfig.json index 062cff9..f234ccb 100644 --- a/playground/tsconfig.json +++ b/playground/tsconfig.json @@ -4,11 +4,13 @@ "esModuleInterop": true, "jsx": "react", "lib": ["es2017", "dom"], - "noEmitOnError": true, - "strict": false, "module": "ESNext", "target": "ESNext", "moduleResolution": "Node", - "typeRoots": ["./node_modules/@types", "../node_modules/@types", "./types"] + "typeRoots": [ + "./node_modules/@types", + "../node_modules/@types", + "./src/types" + ] } } diff --git a/playground/types/babel-plugin-unpkg.d.ts b/playground/types/babel-plugin-unpkg.d.ts deleted file mode 100644 index a8f2caa..0000000 --- a/playground/types/babel-plugin-unpkg.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module "babel-plugin-unpkg"; diff --git a/playground/types/babel-standalone.d.ts b/playground/types/babel-standalone.d.ts deleted file mode 100644 index 3d69668..0000000 --- a/playground/types/babel-standalone.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module "@babel/standalone"; diff --git a/playground/types/iframe.d.ts b/playground/types/iframe.d.ts deleted file mode 100644 index 4b81077..0000000 --- a/playground/types/iframe.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -declare namespace JSX { - interface IFrameLazy - extends React.DetailedHTMLProps< - React.IframeHTMLAttributes, - HTMLIFrameElement - > { - loading: "eager" | "lazy" | "auto"; - } - interface IntrinsicElements { - iframe: IFrameLazy; - } -} diff --git a/playground/types/react-inspector.d.ts b/playground/types/react-inspector.d.ts deleted file mode 100644 index ae75dca..0000000 --- a/playground/types/react-inspector.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module "@agney/react-inspector";