Merge pull request #3958 from gengjiawen/feat/vite_demo

feat: migrate demo to vite
preactjs · May 8, 2023 · b114dcc · b114dcc
2 parents 8b943f9 + e4f3522
commit b114dcc
Show file tree

Hide file tree

Showing 40 changed files with 1,393 additions and 15,968 deletions.
diff --git a/demo/contenteditable.js → demo/contenteditable.jsx b/demo/contenteditable.js → demo/contenteditable.jsx
@@ -1,4 +1,3 @@
-import { createElement } from 'preact';
 import { useState } from 'preact/hooks';
 
 export default function Contenteditable() {

diff --git a/demo/context.js → demo/context.jsx b/demo/context.js → demo/context.jsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-unused-vars
-import { createElement, Component, createContext, Fragment } from 'preact';
+import { Component, createContext } from 'preact';
 const { Provider, Consumer } = createContext();
 
 class ThemeProvider extends Component {

diff --git a/demo/controlled-inputs.js → demo/controlled-inputs.jsx b/demo/controlled-inputs.js → demo/controlled-inputs.jsx
@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
 
-/** @jsx React.createElement */
-
 const ControlledInputs = () => {
 	const [value, set] = useState('');
 	const onChange = e => {

diff --git a/demo/devtools.js → demo/devtools.jsx b/demo/devtools.js → demo/devtools.jsx
@@ -1,12 +1,4 @@
-// eslint-disable-next-line no-unused-vars
-import {
-	createElement,
-	Component,
-	memo,
-	Fragment,
-	Suspense,
-	lazy
-} from 'react';
+import { Component, memo, Suspense, lazy } from 'react';
 
 function Foo() {
 	return <div>I'm memoed</div>;

diff --git a/demo/fragments.js → demo/fragments.jsx b/demo/fragments.js → demo/fragments.jsx
@@ -1,6 +1,6 @@
-import { createElement, Component, Fragment } from 'preact';
+import { Component } from 'preact';
 
-export default class extends Component {
+export default class FragmentComp extends Component {
 	state = { number: 0 };
 
 	componentDidMount() {

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Preact Demo</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/index.jsx"></script>
+	</body>
+</html>
diff --git a/demo/index.js → demo/index.jsx b/demo/index.js → demo/index.jsx
@@ -1,4 +1,4 @@
-import { createElement, render, Component, Fragment } from 'preact';
+import { render, Component, Fragment } from 'preact';
 // import renderToString from 'preact-render-to-string';
 import './style.scss';
 import { Router, Link } from 'preact-router';

diff --git a/demo/key_bug.js → demo/key_bug.jsx b/demo/key_bug.js → demo/key_bug.jsx
@@ -1,4 +1,4 @@
-import { createElement, Component } from 'preact';
+import { Component } from 'preact';
 
 function Foo(props) {
 	return <div>This is: {props.children}</div>;

diff --git a/demo/list.js → demo/list.jsx b/demo/list.js → demo/list.jsx
diff --git a/demo/logger.js → demo/logger.jsx b/demo/logger.js → demo/logger.jsx
diff --git a/demo/mobx.js → demo/mobx.jsx b/demo/mobx.js → demo/mobx.jsx
@@ -1,4 +1,4 @@
-import React, { createElement, forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 import { decorate, observable } from 'mobx';
 import { observer, useObserver } from 'mobx-react';
 import 'mobx-react-lite/batchingForReactDom';

diff --git a/demo/nested-suspense/addnewcomponent.js → demo/nested-suspense/addnewcomponent.jsx b/demo/nested-suspense/addnewcomponent.js → demo/nested-suspense/addnewcomponent.jsx
diff --git a/demo/nested-suspense/component-container.js → demo/nested-suspense/component-container.jsx b/demo/nested-suspense/component-container.js → demo/nested-suspense/component-container.jsx
@@ -1,10 +1,10 @@
-import { createElement, lazy } from 'react';
+import { lazy } from 'react';
 
 const pause = timeout =>
 	new Promise(d => setTimeout(d, timeout), console.log(timeout));
 
 const SubComponent = lazy(() =>
-	pause(Math.random() * 1000).then(() => import('./subcomponent.js'))
+	pause(Math.random() * 1000).then(() => import('./subcomponent.jsx'))
 );
 
 export default function ComponentContainer({ appearance }) {

diff --git a/demo/nested-suspense/dropzone.js → demo/nested-suspense/dropzone.jsx b/demo/nested-suspense/dropzone.js → demo/nested-suspense/dropzone.jsx
diff --git a/demo/nested-suspense/editor.js → demo/nested-suspense/editor.jsx b/demo/nested-suspense/editor.js → demo/nested-suspense/editor.jsx
diff --git a/demo/nested-suspense/index.js → demo/nested-suspense/index.jsx b/demo/nested-suspense/index.js → demo/nested-suspense/index.jsx
@@ -18,16 +18,16 @@ const pause = timeout =>
 	new Promise(d => setTimeout(d, timeout), console.log(timeout));
 
 const DropZone = lazy(() =>
-	pause(Math.random() * 1000).then(() => import('./dropzone.js'))
+	pause(Math.random() * 1000).then(() => import('./dropzone.jsx'))
 );
 const Editor = lazy(() =>
-	pause(Math.random() * 1000).then(() => import('./editor.js'))
+	pause(Math.random() * 1000).then(() => import('./editor.jsx'))
 );
 const AddNewComponent = lazy(() =>
-	pause(Math.random() * 1000).then(() => import('./addnewcomponent.js'))
+	pause(Math.random() * 1000).then(() => import('./addnewcomponent.jsx'))
 );
 const GenerateComponents = lazy(() =>
-	pause(Math.random() * 1000).then(() => import('./component-container.js'))
+	pause(Math.random() * 1000).then(() => import('./component-container.jsx'))
 );
 
 export default class App extends Component {

diff --git a/demo/nested-suspense/subcomponent.js → demo/nested-suspense/subcomponent.jsx b/demo/nested-suspense/subcomponent.js → demo/nested-suspense/subcomponent.jsx