How to create a Typescript , for web-browser counter application , using VITE & PREACT.

Alain De Vos

Alain De Vos

Ok typescript is javascript but with type checking.

First one can add typescript to neovim - vim-plug - coc ; i.e. coloring & completion.
Add to init.vim
Code: 
let g:coc_global_extensions = ['coc-tsserver', 'coc-json', 'coc-pyright', 'coc-sourcekit', 'coc-zig', 'coc-eslint', 'coc-prettier']

" 1. Alle Plugins in één blok
call plug#begin()

Plug 'leafgarland/typescript-vim'
Plug 'MaxMEllon/vim-jsx-pretty'
...

In neovim perform : plug-install : coc-install
 
create a directory MYPROJECT , go to the directory MYPROJECT.

Create a file "vite.config.ts",
Code: 
import { defineConfig } from 'vite';
export default defineConfig({
  server: { host: '127.0.0.1' },
  build: { rollupOptions: { external: ['preact', '@preact/signals', 'htm'] } }
});

Vite transpiles Typescript to Javascript.

Create the home page of the app, "index.html"
Code: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="importmap">
  {
    "imports": {
      "preact": "/node_modules/preact/dist/preact.mjs",
      "preact/hooks": "/node_modules/preact/hooks/dist/hooks.mjs",
      "@preact/signals": "/node_modules/@preact/signals/dist/signals.mjs",
      "htm": "/node_modules/htm/dist/htm.mjs"
    }
  }
  </script>
</head>
<body style="background: #111; color: #0f0; font-family: monospace;">
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>
Very important are explicit paths to the imports...

Create a subdirectory src.
Now last and not least, create a typescript file in ./src/ named "main.ts",
Code: 
import { render, h } from 'preact';
import { signal } from '@preact/signals';
import htm from 'htm';
const html = htm.bind(h);
const count = signal(0);
function App() {
  return html`
    <div style="padding: 40px; border: 2px dashed #0f0; display: inline-block;">
      <h1 style="text-decoration: underline;">FREEBSD TS-CONSOLE</h1>
      <p style="font-size: 2rem;">VALUE: [ ${count.value} ]</p>
      <button
        style="background: #0f0; color: #000; border: none; padding: 10px 30px; font-weight: bold; cursor: pointer;"
        onClick=${() => count.value++}
      >
        INC_COUNTER
      </button>
    </div>
  `;
}
render(html`<${App} />`, document.getElementById('app')!);
 
Run the following script,
Code: 
npm install htm preact @preact/signals
killall -9 npx
npx vite --host 127.0.0.1 &
sleep 1
firefox 127.0.0.1:5174
# npm run dev

You will see a counter application,
test.png
 
You must log in or register to reply here.
Back
Top