Instalación

Para instalar TypesCraft en tu proyecto, primero debes tener instalado Node.js en tu sistema. Si no lo tienes, puedes descargarlo desde la página oficial de Node.js: https://nodejs.org/.

Instalación de TypesCraft

Para utilizar TypesCraft en un proyecto nuevo, primero debes crear un proyecto de Node.js y luego instalar TypesCraft. Como no existe una plantilla de TypesCraft en npm, se recomienda crear un proyecto con **Vite**. Para esto, ejecuta el siguiente comando: 

npm create vite@latest mi-proyecto -- --template vanilla-ts
cd mi-proyecto
npm install
code .

Instalacion en beta

Esta es una version beta de libreria, y esta posee una clave de instalacion. Para instalar esta libreria es necesario que obtengas la clave en un archivo .npmrc. Este archivo debe ser includio en la raiz de tu proyecto y luego ejecutar el siguiente comando: 


npm install @seigenta/[email protected] --userconfig=./.npmrc

Luego de esto, ya puedes saltarte el siguiente paso e ir por el paso donde se modifica el html.

Si planeas subir este proyecto a github, es importante que el archivo .npmrc no se suba al repositorio, ya que contiene la clave de instalacion de la libreria. Para evitar esto, puedes agregar el archivo .npmrc a el archivo .gitignore, o ejecutando el siguiente comando: 

echo ".npmrc" >> .gitignore

Igualmente se recomienda revisar que el archivo .gitignore tenga el texto .npmrc para evitar que se suba al repositorio.

Luego de haber creado tu proyecto con Vite, debes instalar TypesCraft. Para esto, ejecuta el siguiente comando en la raíz de tu proyecto: 

npm install @seigenta/[email protected]

Ahora debemos configurar el proyecto. Para esto, agrega el siguiente código en tu HTML, en especifico en el archivo `index.html`, debemos remplazar el contenido del archivo por el siguiente código: 

<!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>Vite + TS</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        height: 100vh;
        width: 100vw;
        margin: 0;
        padding: 0;
      }

      * {
        box-sizing: border-box;
      }
  
      #app-only-ts {
        height: 100%;
        width: 100%;
        display: flex;
      }
    </style>
  </head>
  <body>
    <div id="app-only-ts"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Luego, debes agregar el siguiente código en tu archivo `main.ts` para inicializar TypesCraft. Primero elimina todo el contenido del archivo `main.ts` y borra el archivo `counter.ts`, ya que no lo necesitaremos. Luego, agrega el siguiente código en el archivo `main.ts`: 


import { Context, MaterialApp, Widget } from "@seigenta/TypesCraft/widget";
import Text  from "@seigenta/TypesCraft/widgets/texts/text";

class MyApp extends MaterialApp {
  build(_: Context): Widget<any> | null {
    return new Text({ text: "Hello World" });
  }
}
  
const app = new MyApp();
app.run("app-only-ts");

Ahora puedes ejecutar normalmente tu proyecto con Vite. Para esto, solo necesitas ejecutar el siguiente comando en tu terminal: 

npm run dev

Con esto, ya tendrás tu proyecto corriendo con TypesCraft. A partir de aquí, puedes comenzar a desarrollar tu proyecto con TypesCraft. Si tienes alguna duda, consulta la documentación oficial de TypesCraft.