diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5ada990 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +strict-peer-dependencies=false +auto-install-peers=true +registry=https://registry.npmjs.org/ diff --git a/components/playground/Console.tsx b/components/playground/Console.tsx deleted file mode 100644 index e365086..0000000 --- a/components/playground/Console.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import clsx from "clsx"; -import { Console } from "console-feed"; -import React, { MutableRefObject, useEffect, useRef } from "react"; -import { AlertCircle, HelpCircle, Trash2 } from "react-feather"; -import { useDispatch, useSelector } from "react-redux"; -import { RootState } from "../../redux"; -import { CLEAR_LOGS } from "../../redux/actions/editor.actions"; - -export const ConsoleComponent = () => { - const logs = useSelector((s) => s.editor.console); - const dispatch = useDispatch(); - - const handleClear = () => dispatch(CLEAR_LOGS()); - - return ( -
-
- - -
- - -
- -
-
- ); -}; diff --git a/components/playground/Editor.tsx b/components/playground/Editor.tsx deleted file mode 100644 index 1e4702f..0000000 --- a/components/playground/Editor.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { Listbox } from "@headlessui/react"; -import MonacoEditor, { OnChange, OnMount } from "@monaco-editor/react"; -import React, { useCallback, useRef, useState } from "react"; -import { useDispatch } from "react-redux"; -import { CREATE_BUNDLE } from "../../redux/actions/bundler.actions"; -import { SWITCH_LANG, UPDATE_CODE } from "../../redux/actions/editor.actions"; -import { debounce } from "../../utils"; -import { useTypedSelector } from "../../utils/hooks/use-actions"; -import { useEffectAfterMount } from "../../utils/hooks/use-effect-aftermount"; -import { MonacoConfig } from "../../utils/monaco"; -import { initEditor, initMonaco } from "../../utils/monaco/register"; -import { ICodeEditor } from "../../utils/typings/types"; -import { HeaderPanel } from "./Header"; - -const Editor: React.FC = () => { - const instance = useRef<{ editor: ICodeEditor; format: any } | null>(null); - const activeModel = useRef(); - const dispatch = useDispatch(); - - const active_file = useTypedSelector((s) => s.editor.active_file); - - const code = useTypedSelector((s) => s.editor.files[active_file.type].value); - - useEffectAfterMount(() => { - if (active_file.type === "script") { - let timer: NodeJS.Timeout; - let promise; - timer = setTimeout(() => { - promise = dispatch(CREATE_BUNDLE()); - }, 800); - - return () => { - promise?.abort(); - clearTimeout(timer); - }; - } - }, [code]); - - const onEditorDidMount: OnMount = (editor: ICodeEditor, monaco) => { - const format = editor.getAction("editor.action.formatDocument"); - instance.current = { editor, format }; - - activeModel.current = editor.getModel(); - - initEditor(editor, monaco); - - editor.onDidChangeModelContent(() => debounce(() => editor.saveViewState(), 200)); - }; - - const onChangeHandler = debounce((code) => { - dispatch(UPDATE_CODE({ type: active_file.type, code: code || "" })); - }, 50); - - const formatCode = useCallback(() => instance.current?.format.run(), [instance.current]); - - return ( -
- - Booting Up...} - /> - {active_file.type === "script" && } -
- ); -}; - -const LangSwitcher = ({ file }: any) => { - const formats = [ - { id: 1, name: "Javascript", extension: ".jsx" }, - { id: 2, name: "Typescript", extension: ".tsx" }, - ]; - - const [selectedLang, setSelectedLang] = useState(() => - formats.find((e) => e.extension === "." + file.name.split(".")[1]) - ); - const dispatch = useDispatch(); - - const onLangChange = (e: any) => { - setSelectedLang(e); - dispatch(SWITCH_LANG({ ext: e.extension, lang: e.name.toLowerCase() })); - }; - return ( -
- - - {formats.map((lang) => ( - - {({ active, selected }) => ( - - {lang.name} - - )} - - ))} - - {selectedLang?.name} - -
- ); -}; - -export default Editor; diff --git a/components/playground/Footer.tsx b/components/playground/Footer.tsx deleted file mode 100644 index 12d7307..0000000 --- a/components/playground/Footer.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import clsx from "clsx"; -import { AlertOctagon, BatteryCharging, PhoneIncoming } from "react-feather"; -import { useSelector } from "react-redux"; -import { RootState } from "../../redux"; - -export const FooterPanel = () => { - const isBundling = useSelector((s) => s.bundler.isBundling); - const isInitialized = useSelector((s) => s.bundler.initialized); - const hasError = useSelector((s) => s.bundler.hasError); - - return ( -
-
- {isBundling || !isInitialized ? ( - - ) : hasError ? ( - - ) : ( - - )} - - Bundler state:{" "} - - {!hasError && !isInitialized - ? "Initializing..." - : hasError - ? "Bundling Error" - : isBundling - ? "Bundling..." - : "Idle"} - - -
-
- ); -}; - -const Loader = () => { - return ( - - - - - ); -}; diff --git a/components/playground/Header.tsx b/components/playground/Header.tsx deleted file mode 100644 index f6f01a7..0000000 --- a/components/playground/Header.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import clsx from "clsx"; -import { memo, useCallback, useState } from "react"; -import { AlignLeft, Settings, Zap } from "react-feather"; -import { useDispatch } from "react-redux"; -import { CREATE_BUNDLE } from "../../redux/actions/bundler.actions"; -import { SWITCH_FILE } from "../../redux/actions/editor.actions"; -import { useTypedSelector } from "../../utils/hooks/use-actions"; -import { SettingsModal } from "./SettingsModal"; - -export const HeaderPanel: React.FC<{ onFormat: any }> = memo(({ onFormat }) => { - const dispatch = useDispatch(); - - const active_file = useTypedSelector((s) => s.editor.active_file); - const [isOpen, setIsOpen] = useState(false); - - const runCode = useCallback(() => { - let timer = setTimeout(() => { - dispatch(CREATE_BUNDLE()); - }, 50); - - return () => clearTimeout(timer); - }, []); - - return ( - <> - -
- - -
- - -
-
- - ); -}); - -HeaderPanel.displayName = "HeaderPanel"; - -export const Tabs = ({ active_file }) => { - const filesObj = useTypedSelector((s) => s.editor.files); - const files = Object.keys(filesObj); - - return ( -
- {files.map((file: any) => ( - - ))} -
- ); -}; - -const Tab = ({ name, isActive, lang, type }: any) => { - const dispatch = useDispatch(); - - const handleClick = () => { - if (isActive) return; - dispatch(SWITCH_FILE({ lang, name, type })); - }; - - return ( - - ); -}; diff --git a/components/playground/Preview.tsx b/components/playground/Preview.tsx deleted file mode 100644 index 6c704e3..0000000 --- a/components/playground/Preview.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import { Transition } from "@headlessui/react"; -import clsx from "clsx"; -import { useCallback, useEffect, useRef } from "react"; -import Loader from "react-loader-spinner"; -import { useDispatch, useSelector } from "react-redux"; -import { RootState } from "../../redux"; -import { CREATE_BUNDLE } from "../../redux/actions/bundler.actions"; -import { PRINT_CONSOLE } from "../../redux/actions/editor.actions"; -import { ConsoleComponent } from "./Console"; -import { Resizeable } from "./Resizeable"; - -export const Preview: React.FC = () => { - const iFrameRef = useRef(null); - const dispatch = useDispatch(); - const javascript = useSelector((s) => s.bundler.bundle); - const isInit = useSelector((s) => s.bundler.initialized); - const html = useSelector((s) => s.editor.files.markup.value); - const css = useSelector((s) => s.editor.files.styles.value); - - const loadCode = useCallback( - (e: HTMLIFrameElement) => { - e.contentWindow!.postMessage({ html: html }, "*"); - e.contentWindow!.postMessage({ css: css }, "*"); - e.contentWindow!.postMessage({ javascript: javascript }, "*"); - }, - [html, css, javascript] - ); - - useEffect(() => { - if (iFrameRef.current) { - loadCode(iFrameRef.current); - } - }, [javascript, css, html]); - - useEffect(() => { - if (!javascript) { - dispatch(CREATE_BUNDLE()); - } - - const handler = (event: any) => { - if (event.data.type === "console") { - console[event.data.method](JSON.parse(event.data.data).join(" ")); - dispatch( - PRINT_CONSOLE({ - method: event.data.method, - data: JSON.parse(event.data.data), - }) - ); - } - }; - - window.addEventListener("message", handler); - - return () => window.removeEventListener("message", handler); - }, []); - - return ( - -
- - - -