Ethan's questions

Estou tentando compor meu próprio componente Combobox usando Shadcn ui. Ao fazer isso, estou usando o componente Command .

Estou tentando vincular meu valor de entrada de comando ao estado do React no componente cliente Next.js assim:

const [customerQuery, setCustomerQuery] = useState("");

return <CommandInput
     placeholder="[email protected]"
     value={customerQuery}
     onChange={(e: any) => setCustomerQuery(e.target.value)}
     spellCheck={false}
/>

Na verdade, recebo um erro de tipo no onChangemanipulador:

Type '{ placeholder: string; value: string; onChange: (e: any) => void; spellCheck: false; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'. ts(2322)

Isso seria bom de consertar. Mas um problema maior é que ao digitar no campo de entrada nada acontece, nenhum texto aparece, nada. Vincular assim funciona para uma entrada regular, mas não parece funcionar na entrada do cmdk. Não recebo erros no console. As ferramentas de desenvolvimento do React não mostram nenhuma atualização no computador. Não vejo nenhum problema relacionado no Github do cmdk.

Se ajudar, aqui está o que o React devtools mostra:

Como posso consertar isso?

Tenho algum código assíncrono na minha função AWS Lambda e não importa qual código assíncrono esteja em execução, ele nunca resolve. Ele apenas faz com que o Lambda atinja o tempo limite.

export const handler: Handler = async (event) => {
   console.log("stops after this");
   const test = new Promise(() => setTimeout(() => void 1000));

   await test;

   // Never runs 
   console.log("test");
}

Aqui está o código na minha pilha para o lambda. Ele está vinculado ao gateway da API:

const api = new cdk.aws_apigatewayv2.HttpApi(this, "devpad-api");

        const projectLambda = new lambda.Function(this, "ProjectLambda", {
            runtime: lambda.Runtime.NODEJS_20_X,
            handler: "index.handler",
            code: lambda.Code.fromAsset("./lambdas/project/out/"),
            timeout: cdk.Duration.seconds(10),
            environment: {
                MONGODB_CONNECTION_STRING: process.env.MONGODB_CONNECTION_STRING || "",
                CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY || "",
            },
        });

Por que isso está acontecendo?

Eu tenho o seguinte teste de configuração:

import {  describe, it } from "vitest";
import { init, initServer } from "../src";
import dotenv from "dotenv";

dotenv.config();

describe("#setup", () => {
  it("should initialize the server", async () => {
    await init(await initServer() as string);
  });
});

Observe que não é possível usar beforeEach de nenhum outro método before porque ele só pode ser executado uma vez no comando de teste.

No entanto, quando executo, recebo um erro:

[!] RollupError: src/index.ts (22:23): Expected ',', got ':' (Note that you need plugins to import files that are not JavaScript)
src/index.ts (22:23)
20:  * @async
21:  */
22: const init = async (url: string, password?: string) => {
                           ^
23:   const response = await fetch(url);
RollupError: Expected ',', got ':'

Não vejo razão para que isso gere um erro, pois é um TS válido. Aqui está minha configuração do Vite:

import {defineConfig} from "vite";

export default defineConfig({
  server: {
    watch: {
      ignored: ["node_modules", "dist"]
    }
  },
  test: {
    globalSetup: "tests/setup.spec.ts"
  }
});

Espaço de trabalho do Vitest:

import { defineWorkspace } from "vitest/config";

export default defineWorkspace([
    {
    extends: "vite.config.ts",
    test: {
        include: ["tests/setup.spec.ts"],
        name: "setup",
        environment: "node" 
    }
}])

Configuração de acúmulo:

import serve from "rollup-plugin-serve";
import typescript from "@rollup/plugin-typescript";
import copy from "rollup-plugin-copy";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        dir: "dist",
        format: "es"
      }
    ],

    inlineDynamicImports: true,
    presserveModules: true,
    plugins: [
      serve({contentBase: "dist"}),
      typescript(),
      copy({targets: [{src: "src/server/init.sh", dest: "dist"}]})
    ],
    external: ["express"]
  }
];

Tenho o seguinte código para ler um arquivo no meu projeto com Node fs.

 const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: fs.readFileSync(
            `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
          )
        }
      }
    };

Que faz parte da aula geral:

import {WebContainer, FileSystemTree} from "@webcontainer/api";
import fs from "fs";

export default class Container {
  private mContainer!: WebContainer;

  constructor() {
    this.CreateContainer();
    this.ScaffoldViteApp();
    this.StartDevServer();
  }

  private CreateContainer = async () => {
    try {
      this.mContainer = await WebContainer.boot();
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }; 

  private ScaffoldViteApp = async () => {
    try {
      this.mContainer.spawn("npm", [
        "create",
        "vite",
        "container-example -- --template react-swc-ts"
      ]);
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  };

  private StartDevServer = async () => {
    try {
      this.mContainer.spawn("npm", ["run", "dev"]);
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  };

  public SetComponent(name: string) {
    const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: fs.readFileSync(
            `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}.tsx`
          )
        }
      }
    };

    console.log(fs.readFileSync(
        `../../apps/components/${name.toLowerCase()}/${name.charAt(0).toUpperCase()}${name.slice(1)}`
      ))

    try {
      this.mContainer.fs.mkdir("components");
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    try {
      this.mContainer.mount(files, {mountPoint: "components"});
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }

  public GetIframe() {
    return this.mContainer.on("server-ready", (port, url) => {
      return url;
    });
  }

  public WriteComponent(name: string, content: string) {
    const files: FileSystemTree = {
      "Component.tsx": {
        file: {
          contents: content
        }
      }
    };

    try {
      this.mContainer.mount(files, {mountPoint: "components"});
    } catch (err) {
      throw new Error(JSON.stringify(err));
    }

    return this.mContainer;
  }
}

Quando uso o vitest para executar: Container.SetComponent()recebo um erro:

Error: ENOENT: no such file or directory, open '../../apps/components/example/Example'

Porém, ao clicar no caminho, ele de fato existe. Eu tentei a mesma coisa com um .tsxfinal sem sucesso. Também tentei executar o arquivo com ts-node e tsx e obtive os mesmos resultados. Aqui está a estrutura do meu projeto:

.
├── README.md
├── apps
│   ├── components
│   │   ├── example
│   │   │   ├── Example.tsx
│   │   │   ├── stories
│   │   │   │   └── Example.stories.tsx
│   │   │   └── tests
│   │   │       └── example.spec.tsx
│   │   └── project.json
│   ├── docs
│   │   ├── README.md
│   │   ├── astro.config.mjs
│   │   ├── node_modules
│   │   │   ├── @astrojs
│   │   │   │   ├── check -> ../../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@astrojs/check
│   │   │   │   └── starlight -> ../../../../node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected][email protected]_/node_modules/@astrojs/starlight
│   │   │   ├── astro -> ../../../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/astro
│   │   │   ├── sharp -> ../../../node_modules/.pnpm/[email protected]/node_modules/sharp
│   │   │   └── typescript -> ../../../node_modules/.pnpm/[email protected]/node_modules/typescript
│   │   ├── package.json
│   │   ├── project.json
│   │   ├── public
│   │   │   └── favicon.svg
│   │   └── src
│   │       ├── assets
│   │       │   └── houston.webp
│   │       ├── content
│   │       │   ├── config.ts
│   │       │   └── docs
│   │       │       ├── components
│   │       │       │   └── example.mdx
│   │       │       ├── guides
│   │       │       │   └── example.md
│   │       │       └── index.mdx
│   │       └── env.d.ts
│   └── storybook
│       ├── node_modules
│       ├── package.json
│       ├── project.json
│       ├── tsconfig.json
│       └── tsconfig.storybook.json
├── docs
│   ├── assets
│   │   ├── highlight.css
│   │   ├── icons.js
│   │   ├── icons.svg
│   │   ├── main.js
│   │   ├── navigation.js
│   │   ├── search.js
│   │   └── style.css
│   ├── functions
│   │   └── default.html
│   ├── index.html
│   ├── modules.html
│   └── types
│       └── Props.html
├── eslint.config.js
├── index.css
├── nx.json
├── package.json
├── packages
│   ├── docs-sandbox
│   │   ├── createContainer.ts
│   │   ├── project.json
│   │   └── tests
│   │       └── createContainer.spec.ts
│   ├── etech-ui-dev
│   │   └── project.json
│   └── etech-ui-utils
│       └── project.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── postcss.config.cjs
├── reactDocgen.ts
├── tailwind.config.js
├── tests
│   └── setup.ts
├── tsconfig.astro.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.react.json
├── types
│   └── eslint-plugin-react.d.ts
└── vite.config.ts

Eu tenho o seguinte arquivo HTML chamado index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Components test</title>
    <script src="/script.js"></script>
</head>
<body>
    <h1>All reviews:</h1>
    <div id="CK-reviews"></div>
    
    <h1>All users:</h1>
    <div id="CK-users"></div>

    <h1>Search Users</h1>
    <div id="CK-search"></div>
</body>
</html>

E arquivo de script chamado script.js:

// Fetch calls for data

const get = async (id, filters, url) => {

    const encodedFilters = btoa (JSON.stringify (filters))

    const rawResponse = await fetch (url, {headers: {
        "id": id,
        "filters": encodedFilters
    }})

    const response = await rawResponse.json()
    
    return response
}

const post = async (createData, url) => {
    const rawResponse = await fetch (url, {body: JSON.stringify (createData)})
    const response = await rawResponse.json()

    return response
}


// Inject data into correct divs

const injectReviews = async () => {
    const data = await get ("655643cd1c82275babfaf859", {title: "Thank you"}, "http://localhost:3000/api/reviews/add")

    const reviews = data.reviews

    const reviewsContainer = document.getElementById("CK-reviews")

    let injectHtml = ""

    for (let i = 0; i < reviews.length; i++) {
        injectHtml += `
        
        <div class="CK-review">
            <h1 class="CK-review-title">${reviews[i].title}</h1>
            <b>${reviews[i].stars}</b>
            <p class="CK-search-text">${reviews[i].text}</p>
        </div>`
    }

    reviewsContainer.innerHTML += injectHtml
}

const injectUser = async () => {
    const data  = await get ("64e15d2329617fb0163de018", {}, "http://localhost:3000/api/user")
    const users = data.user

    const usersContainer = document.getElementById("CK-users")

    let injectHtml = ""

    for (let i = 0; i < users.length; i++) {
        injectHtml += `
        
        <div class="CK-user">
            <h1 class="CK-user-name">${users[i].name}</h1>
        </div>`
    }

    usersContainer.innerHTML += injectHtml
}

const injectSearch = () => {
    const searchContainer = document.getElementById("CK-search")
    searchContainer.innerHTML = `<input type="text" placeholder="Search for anyone"/>`
}


injectReviews()
injectUser()
injectSearch()

O problema está na função de pesquisa de injeção, onde recebo um erro:

Uncaught TypeError: can't access property "innerHTML", searchContainer is null
    injectSearch http://localhost:5500/script.js:70
    <anonymous> http://localhost:5500/script.js:76
script.js:70:5
    injectSearch http://localhost:5500/script.js:70
    <anonymous> http://localhost:5500/script.js:76

O que está acontecendo? O elemento existe. Ao tentar acessar outros elementos dentro da função, recebo o mesmo erro. Todas as outras funções funcionam.