File Upload and Preview

packages/compiler/react/component-visitor.ts

@@ -86,9 +86,7 @@ export const componentVisitor = (options: Options = {}, isReact = true) => {
 
     if (comment?.value.includes('million-ignore')) {
       // eslint-disable-next-line no-console
-      console.log(
-        dim(` ○ ${yellow(`<${rawComponent.id.name}>`)} was ignored`),
-      );
+      console.log(dim(` ○ ${yellow(`<${rawComponent.id.name}>`)} was ignored`));
       return;
     }
 

packages/compiler/react/index.ts

@@ -1,3 +1,3 @@
 export { callExpressionVisitor } from './call-expression-visitor';
 export { jsxElementVisitor } from './jsx-element-visitor';
-export { componentVisitor } from './component-visitor';
+export { componentVisitor } from './component-visitor';

packages/kitchen-sink/src/examples/file-upload-preview.jsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { block } from 'million/react';
+const FileUpload=block(({file})=>{
+  return(
+    <div className='preview' >
+    <img src={file} alt='file-uploaded'/>
+    </div>
+  )
+})
+export default function File() {
+  const [file, setFile] = useState();
+  function getFile(event) {
+    setFile(URL.createObjectURL(event.target.files[0]));
+  }
+  return (
+    <div >
+        <div>
+         <input type="file" onChange={getFile}></input> 
+        </div>
+         <div style={{height:200,width:200,padding:10}}>
+         {file && <FileUpload file={file}/>}
+         </div>
+    </div>
+  );
+}

packages/kitchen-sink/src/examples/redux-todo.tsx

@@ -68,7 +68,6 @@ const MainTodoApp = block(() => {
 const TodoApp = () => {
   const [input, setInput] = useState('');
 
-
   const count = useSelector(
     (state: { todo: typeof initialState }) => state.todo.count,
   );

packages/kitchen-sink/src/main.tsx

@@ -26,7 +26,10 @@ type Module = { default: ComponentType<any> };
     Object.entries(import.meta.glob('./examples/*.{tsx,jsx}')).map(
       async ([key, mod]) =>
         [
-          key.replace('./examples/', '').replace('.tsx', '').replace('.jsx', ''),
+          key
+            .replace('./examples/', '')
+            .replace('.tsx', '')
+            .replace('.jsx', ''),
           mod as () => Promise<Module>,
         ] as const,
     ),
@@ -67,7 +70,10 @@ type Module = { default: ComponentType<any> };
                 key={key}
                 disabled={hasSelected && selected === index}
               >
-                {key.replace('./examples/', '').replace('.tsx', '').replace('.jsx', '')}
+                {key
+                  .replace('./examples/', '')
+                  .replace('.tsx', '')
+                  .replace('.jsx', '')}
               </button>
             );
           })}{' '}

packages/preact/utils.ts

@@ -1,9 +1,6 @@
 import { render, Fragment, isValidElement } from 'preact';
 import { RENDER_SCOPE } from './constants';
-import type {
-  VNode as PreactNode,
-  ComponentProps,
-} from 'preact';
+import type { VNode as PreactNode, ComponentProps } from 'preact';
 import type { VNode } from '../million';
 
 export const processProps = (props: ComponentProps<any>) => {

website/components/back-in-block/count.tsx

@@ -22,4 +22,4 @@ export function CountExample() {
       </button>
     </div>
   );
-}
+}

website/components/back-in-block/slideshow.tsx

@@ -51,4 +51,4 @@ export function Slideshow({
       </div>
     </div>
   );
-}
+}

website/components/back-in-block/static-analysis.tsx

@@ -852,4 +852,4 @@ export const descriptions = [
 
 export const StaticAnalysisExample = () => {
   return <Slideshow frames={frames} descriptions={descriptions} />;
-};
+};

website/components/back-in-block/vdom.tsx

@@ -1568,4 +1568,4 @@ const descriptions = [
 
 export const VDomExample = () => {
   return <Slideshow frames={frames} descriptions={descriptions} />;
-};
+};

website/components/home/about.tsx

@@ -24,8 +24,8 @@ export function About() {
                 React at the speed of raw JS
               </h2>
               <p className="text-lg my-8 text-zinc-600 dark:text-zinc-300">
-                Million.js automatically optimizes React, making it run way faster. It's one
-                of the top performers in the{' '}
+                Million.js automatically optimizes React, making it run way
+                faster. It's one of the top performers in the{' '}
                 <a
                   href="https://krausest.github.io/js-framework-benchmark/2023/table_chrome_112.0.5615.49.html"
                   target="_blank"

website/components/million-library/block-878fb9ae.d.ts

@@ -1,21 +1,57 @@
-import { P as Props, a as VElement, V as VNode, A as AbstractBlock, E as Edit } from './types-35702ad2.js';
+import {
+  P as Props,
+  a as VElement,
+  V as VNode,
+  A as AbstractBlock,
+  E as Edit,
+} from './types-35702ad2.js';
 
-declare const block: (fn: (props?: Props) => VElement, unwrap?: ((vnode: any) => VNode) | undefined, shouldUpdate?: ((oldProps: Props, newProps: Props) => boolean) | undefined) => (props?: Props | null, key?: string, shouldUpdateCurrentBlock?: ((oldProps: Props, newProps: Props) => boolean) | undefined) => Block;
-declare const mount: (block: AbstractBlock, parent?: HTMLElement) => HTMLElement;
-declare const patch: (oldBlock: AbstractBlock, newBlock: AbstractBlock) => HTMLElement;
+declare const block: (
+  fn: (props?: Props) => VElement,
+  unwrap?: ((vnode: any) => VNode) | undefined,
+  shouldUpdate?: ((oldProps: Props, newProps: Props) => boolean) | undefined,
+) => (
+  props?: Props | null,
+  key?: string,
+  shouldUpdateCurrentBlock?:
+    | ((oldProps: Props, newProps: Props) => boolean)
+    | undefined,
+) => Block;
+declare const mount: (
+  block: AbstractBlock,
+  parent?: HTMLElement,
+) => HTMLElement;
+declare const patch: (
+  oldBlock: AbstractBlock,
+  newBlock: AbstractBlock,
+) => HTMLElement;
 declare class Block extends AbstractBlock {
-    r: HTMLElement;
-    e: Edit[];
-    constructor(root: HTMLElement, edits: Edit[], props?: Props | null, key?: string, shouldUpdate?: (oldProps: Props, newProps: Props) => boolean, getElements?: (root: HTMLElement) => HTMLElement[]);
-    m(parent?: HTMLElement, refNode?: Node | null): HTMLElement;
-    p(newBlock: AbstractBlock): HTMLElement;
-    v(block?: AbstractBlock | null, refNode?: Node | null): void;
-    x(): void;
-    u(_oldProps: Props, _newProps: Props): boolean;
-    s(): string;
-    t(): HTMLElement | null | undefined;
+  r: HTMLElement;
+  e: Edit[];
+  constructor(
+    root: HTMLElement,
+    edits: Edit[],
+    props?: Props | null,
+    key?: string,
+    shouldUpdate?: (oldProps: Props, newProps: Props) => boolean,
+    getElements?: (root: HTMLElement) => HTMLElement[],
+  );
+  m(parent?: HTMLElement, refNode?: Node | null): HTMLElement;
+  p(newBlock: AbstractBlock): HTMLElement;
+  v(block?: AbstractBlock | null, refNode?: Node | null): void;
+  x(): void;
+  u(_oldProps: Props, _newProps: Props): boolean;
+  s(): string;
+  t(): HTMLElement | null | undefined;
 }
 declare const stringToDOM: (content: string) => HTMLElement;
 declare const withKey: (value: any, key: string) => any;
 
-export { Block as B, block as b, mount as m, patch as p, stringToDOM as s, withKey as w };
+export {
+  Block as B,
+  block as b,
+  mount as m,
+  patch as p,
+  stringToDOM as s,
+  withKey as w,
+};

website/components/million-library/compiler.d.ts

@@ -3,22 +3,32 @@ import * as _babel_core from '@babel/core';
 import { NodePath } from '@babel/core';
 import * as t from '@babel/types';
 
-declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
-    name: string;
-    visitor: {
-        CallExpression(this: _babel_core.PluginPass, path: NodePath<t.CallExpression>): void;
-    };
+declare const _default: (
+  api: object,
+  options: Record<string, any> | null | undefined,
+  dirname: string,
+) => {
+  name: string;
+  visitor: {
+    CallExpression(
+      this: _babel_core.PluginPass,
+      path: NodePath<t.CallExpression>,
+    ): void;
+  };
 };
 
 interface UserOptions {
-    ignoreFiles?: string[];
-    memo?: boolean;
-    mode: 'react' | 'next' | 'react-server' | 'optimize';
+  ignoreFiles?: string[];
+  memo?: boolean;
+  mode: 'react' | 'next' | 'react-server' | 'optimize';
 }
 
-declare const unplugin: _unplugin.UnpluginInstance<UserOptions | undefined, boolean>;
+declare const unplugin: _unplugin.UnpluginInstance<
+  UserOptions | undefined,
+  boolean
+>;
 declare const next: (nextConfig?: Record<string, any>) => {
-    webpack(config: Record<string, any>, options: Record<string, any>): any;
+  webpack(config: Record<string, any>, options: Record<string, any>): any;
 };
 
 export { _default as babelPlugin, unplugin as default, next, unplugin };

website/components/million-library/jsx-runtime.d.ts

@@ -1,5 +1,9 @@
 import { P as Props, V as VNode } from './types-35702ad2.js';
 
-declare const h: (type: string, props?: Props | null, ...children: VNode[]) => VNode;
+declare const h: (
+  type: string,
+  props?: Props | null,
+  ...children: VNode[]
+) => VNode;
 
 export { h as createElement, h, h as jsx, h as jsxs };

website/components/million-library/million.d.ts

@@ -1,21 +1,37 @@
-export { B as Block, b as block, m as mount, p as patch, s as stringToDOM, w as withKey } from './block-878fb9ae.js';
+export {
+  B as Block,
+  b as block,
+  m as mount,
+  p as patch,
+  s as stringToDOM,
+  w as withKey,
+} from './block-878fb9ae.js';
 import { A as AbstractBlock, V as VNode, E as Edit } from './types-35702ad2.js';
-export { A as AbstractBlock, P as Props, a as VElement, V as VNode } from './types-35702ad2.js';
+export {
+  A as AbstractBlock,
+  P as Props,
+  a as VElement,
+  V as VNode,
+} from './types-35702ad2.js';
 
 declare const mapArray: (children: AbstractBlock[]) => ArrayBlock;
 declare class ArrayBlock extends AbstractBlock {
-    b: AbstractBlock[];
-    constructor(children: AbstractBlock[]);
-    v(): void;
-    p(fragment: ArrayBlock): HTMLElement;
-    m(parent: HTMLElement, refNode?: Node | null): HTMLElement;
-    x(): void;
-    u(): boolean;
-    s(): string;
-    t(): HTMLElement | null | undefined;
+  b: AbstractBlock[];
+  constructor(children: AbstractBlock[]);
+  v(): void;
+  p(fragment: ArrayBlock): HTMLElement;
+  m(parent: HTMLElement, refNode?: Node | null): HTMLElement;
+  x(): void;
+  u(): boolean;
+  s(): string;
+  t(): HTMLElement | null | undefined;
 }
 
-declare const renderToTemplate: (vnode: VNode, edits?: Edit[], path?: number[]) => string;
+declare const renderToTemplate: (
+  vnode: VNode,
+  edits?: Edit[],
+  path?: number[],
+) => string;
 
 declare const firstChild$: () => any;
 declare const nextSibling$: () => any;

website/components/million-library/react-server.d.ts

@@ -1,13 +1,21 @@
 import * as react from 'react';
 import { FunctionComponent, ComponentProps } from 'react';
 
-declare const block: (Component: FunctionComponent) => (props: ComponentProps<any>) => react.DOMElement<react.DOMAttributes<Element>, Element> | react.CElement<any, react.Component<any, any, any>>;
+declare const block: (
+  Component: FunctionComponent,
+) => (
+  props: ComponentProps<any>,
+) =>
+  | react.DOMElement<react.DOMAttributes<Element>, Element>
+  | react.CElement<any, react.Component<any, any, any>>;
 declare function For(props: {
-    each: any[];
-    children: (item: any, index: number) => any;
-}): react.FunctionComponentElement<{
-    each: any[];
-    children: (item: any, index: number) => any;
-}> | react.DOMElement<react.DOMAttributes<Element>, Element>;
+  each: any[];
+  children: (item: any, index: number) => any;
+}):
+  | react.FunctionComponentElement<{
+      each: any[];
+      children: (item: any, index: number) => any;
+    }>
+  | react.DOMElement<react.DOMAttributes<Element>, Element>;
 
 export { For, block };

website/components/million-library/react.d.ts

@@ -4,20 +4,34 @@ import { B as Block } from './block-878fb9ae.js';
 import { P as Props, V as VNode } from './types-35702ad2.js';
 
 interface Options {
-    shouldUpdate?: (oldProps: Props, newProps: Props) => boolean;
+  shouldUpdate?: (oldProps: Props, newProps: Props) => boolean;
 }
-declare const REGISTRY: Map<(props: Props) => ReactNode, (props?: Props | null | undefined, key?: string | undefined, shouldUpdateCurrentBlock?: ((oldProps: Props, newProps: Props) => boolean) | undefined) => Block>;
-declare const block: (fn: (props: Props) => ReactNode, options?: Options) => (props: Props) => react.FunctionComponentElement<{
-    children?: ReactNode;
+declare const REGISTRY: Map<
+  (props: Props) => ReactNode,
+  (
+    props?: Props | null | undefined,
+    key?: string | undefined,
+    shouldUpdateCurrentBlock?:
+      | ((oldProps: Props, newProps: Props) => boolean)
+      | undefined,
+  ) => Block
+>;
+declare const block: (
+  fn: (props: Props) => ReactNode,
+  options?: Options,
+) => (props: Props) => react.FunctionComponentElement<{
+  children?: ReactNode;
 }>;
 
 interface MillionArrayProps {
-    each: any[];
-    children: (value: any, i: number) => ReactNode;
+  each: any[];
+  children: (value: any, i: number) => ReactNode;
 }
 declare const For: react.NamedExoticComponent<MillionArrayProps>;
 
-declare const renderReactScope: (jsx: ReactNode) => (el: HTMLElement | null) => HTMLElement;
+declare const renderReactScope: (
+  jsx: ReactNode,
+) => (el: HTMLElement | null) => HTMLElement;
 declare const unwrap: (vnode?: ReactNode) => VNode;
 
 export { For, REGISTRY, block, renderReactScope, unwrap };