linting & checking

.github/workflows/build.yml

@@ -30,10 +30,9 @@ jobs:
 
       - name: Run tests & linter
         run: |
-          npm ci
-          npm run lint
+          npm run lint && npm run check
           npm run test
       # - name: Upload coverage to Codecov
       #   uses: codecov/codecov-action@v4
       #   with:
-      #     token: ${{ secrets.CODECOV_TOKEN }}
+      #     token: ${{ secrets.CODECOV_TOKEN }}

.prettierrc

@@ -5,9 +5,7 @@
 	"semi": false,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": [
-		"prettier-plugin-svelte"
-	],
+	"plugins": ["prettier-plugin-svelte"],
 	"overrides": [
 		{
 			"files": "*.svelte",
@@ -16,4 +14,4 @@
 			}
 		}
 	]
-}
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
-  "editor.formatOnSave": true,
-  "editor.tabSize": 2,
-}
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"editor.formatOnSave": true,
+	"editor.tabSize": 2
+}

README.md

@@ -1,38 +1,22 @@
-# sv
+## Ejemplo Twitter en Svelte
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+El ejemplo muestra cómo podría funcionar una página de Twitter.
 
-## Creating a project
+- Queremos replicar el comportamiento de twitter
+- Escribimos en un texto, nos dice cuántos caracteres escribimos
+- BONUS: que nos diga cuántos caracteres nos quedan
+- BONUS 2: mostrarlo con colores distintos. verde si podemos escribir tranquilo, amarillo cuando falten menos de 5 y rojo cuando ya nos pasamos.
 
-If you're seeing this, you've probably already done this step. Congrats!
+Ejercicio extraído de la [guía de binding](https://algo3.uqbar-project.org/gua-prctica-de-ejercicios/ejercicios-binding).
 
-```bash
-# create a new project in the current directory
-npx sv create
+TODO: demo
 
-# create a new project in my-app
-npx sv create my-app
-```
+## Implementación
 
-## Developing
+La URL es `http://localhost:5173`
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+En la variante con template tenemos
 
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+- un estado mutable: el **tweet**, un string
+- un valor calculable o `$derived`, la **cantidad de caracteres restantes**
+- otro valor calculable a partir de los caracteres restantes, **qué clase le corresponde**.

eslint.config.js

@@ -1,8 +1,8 @@
-import prettier from 'eslint-config-prettier';
-import js from '@eslint/js';
-import svelte from 'eslint-plugin-svelte';
-import globals from 'globals';
-import ts from 'typescript-eslint';
+import prettier from 'eslint-config-prettier'
+import js from '@eslint/js'
+import svelte from 'eslint-plugin-svelte'
+import globals from 'globals'
+import ts from 'typescript-eslint'
 
 export default ts.config(
 	js.configs.recommended,
@@ -30,4 +30,4 @@ export default ts.config(
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
 	}
-);
+)

package.json

@@ -9,6 +9,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint . && prettier --check .",
+		"lint:fix": "eslint . && prettier --write .",
 		"format": "prettier --write .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run"

src/app.d.ts

@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export { }
+export {}

src/app.html

@@ -4,9 +4,12 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
 
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&display=swap" rel="stylesheet">
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&display=swap"
+			rel="stylesheet"
+		/>
 
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%

src/routes/+page.svelte

@@ -1,26 +1,32 @@
-<script lang='ts'>
-  import './styles.css';
+<script lang="ts">
+	import './styles.css'
 
-  const LONGITUD_MAXIMA = 140
+	const LONGITUD_MAXIMA = 140
 
-  const claseEspacioRestante = (restantes: number): string =>
-    restantes > 10 ? 'ok' : (restantes > 5 ? 'limite' : 'pasado')
+	const claseEspacioRestante = (restantes: number): string =>
+		restantes > 10 ? 'ok' : restantes > 5 ? 'limite' : 'pasado'
 
-  let tweet = $state('')
-  let restantes = $derived(LONGITUD_MAXIMA - tweet.length)
-  let espacioRestanteClass = $derived(claseEspacioRestante(restantes))
+	let tweet = $state('')
+	let restantes = $derived(LONGITUD_MAXIMA - tweet.length)
+	let espacioRestanteClass = $derived(claseEspacioRestante(restantes))
 </script>
 
 <article class="container">
-  <h1>Twitter - Svelte</h1>
-  <form name="form" class="form">
-    <div>
-      <textarea id="texto" name="texto" data-testid="texto" placeholder="¿Qué estás pensando?" bind:value={tweet}></textarea>
-    </div>
-    <div>
-      <span data-testid="restantes" class="badge {espacioRestanteClass}">
-        {restantes}
-      </span>
-    </div>
-  </form>
-</article>
+	<h1>Twitter - Svelte</h1>
+	<form name="form" class="form">
+		<div>
+			<textarea
+				id="texto"
+				name="texto"
+				data-testid="texto"
+				placeholder="¿Qué estás pensando?"
+				bind:value={tweet}
+			></textarea>
+		</div>
+		<div>
+			<span data-testid="restantes" class="badge {espacioRestanteClass}">
+				{restantes}
+			</span>
+		</div>
+	</form>
+</article>

src/routes/styles.css

@@ -1,44 +1,44 @@
 * {
-  font-family: "Geist Mono", sans-serif;
-  box-sizing: border-box;
+	font-family: 'Geist Mono', sans-serif;
+	box-sizing: border-box;
 }
 
 form {
-  display: flex;
-  flex-direction: column;
-  font-size: 1.5rem;
+	display: flex;
+	flex-direction: column;
+	font-size: 1.5rem;
 }
 
 h1 {
-  font-size: 1.7rem;
+	font-size: 1.7rem;
 }
 
 input,
 textarea {
-  width: 100%;
-  height: 10em;
-  font-size: 1em;
-  margin-bottom: 2em;
-  padding: 0.8em;
-  border: 1px solid darkslategray;
+	width: 100%;
+	height: 10em;
+	font-size: 1em;
+	margin-bottom: 2em;
+	padding: 0.8em;
+	border: 1px solid darkslategray;
 }
 
 .badge {
-  font-size: 1.2em;
-  padding: 1em;
-  border-radius: 35%;
+	font-size: 1.2em;
+	padding: 1em;
+	border-radius: 35%;
 }
 
 .pasado {
-  color: white;
-  background-color: rgb(201, 72, 72);
+	color: white;
+	background-color: rgb(201, 72, 72);
 }
 
 .limite {
-  background-color: rgb(203, 203, 31);
+	background-color: rgb(203, 203, 31);
 }
 
 .ok {
-  color: white;
-  background-color: green;
-}
+	color: white;
+	background-color: green;
+}

svelte.config.js

@@ -1,18 +1,18 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://svelte.dev/docs/kit/integrations
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: vitePreprocess({ script: true }),
 
 	kit: {
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter()
 	}
-};
+}
 
-export default config;
+export default config

vite.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vitest/config';
-import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config'
+import { sveltekit } from '@sveltejs/kit/vite'
 
 export default defineConfig({
 	plugins: [sveltekit()],
 
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}
-});
+})