mirror of
https://github.com/catdevnull/transicion-desordenada-diablo
synced 2024-11-14 02:21:38 +00:00
frontend básico
This commit is contained in:
parent
b7499e8106
commit
bb29954eef
21 changed files with 1526 additions and 0 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -4,4 +4,6 @@ log
|
|||
prueba
|
||||
datos.gob.ar*
|
||||
data/
|
||||
data*
|
||||
|
||||
*.zip
|
24
frontend/.gitignore
vendored
Normal file
24
frontend/.gitignore
vendored
Normal file
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
3
frontend/.vscode/extensions.json
vendored
Normal file
3
frontend/.vscode/extensions.json
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
47
frontend/README.md
Normal file
47
frontend/README.md
Normal file
|
@ -0,0 +1,47 @@
|
|||
# Svelte + TS + Vite
|
||||
|
||||
This template should help get you started developing with Svelte and TypeScript in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
|
||||
|
||||
## Need an official Svelte framework?
|
||||
|
||||
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
|
||||
|
||||
## Technical considerations
|
||||
|
||||
**Why use this over SvelteKit?**
|
||||
|
||||
- It brings its own routing solution which might not be preferable for some users.
|
||||
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
|
||||
|
||||
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
|
||||
|
||||
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
|
||||
|
||||
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
|
||||
|
||||
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
|
||||
|
||||
**Why include `.vscode/extensions.json`?**
|
||||
|
||||
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
|
||||
|
||||
**Why enable `allowJs` in the TS template?**
|
||||
|
||||
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
|
||||
|
||||
**Why is HMR not preserving my local component state?**
|
||||
|
||||
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
|
||||
|
||||
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
|
||||
|
||||
```ts
|
||||
// store.ts
|
||||
// An extremely simple external store
|
||||
import { writable } from 'svelte/store'
|
||||
export default writable(0)
|
||||
```
|
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<!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 + Svelte + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
28
frontend/package.json
Normal file
28
frontend/package.json
Normal file
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"@types/streamsaver": "^2.0.4",
|
||||
"svelte": "^4.2.3",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"navaid": "^1.2.0",
|
||||
"regexparam": "^3.0.0",
|
||||
"streamsaver": "^2.0.6",
|
||||
"zod": "^3.22.4"
|
||||
}
|
||||
}
|
1133
frontend/pnpm-lock.yaml
Normal file
1133
frontend/pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
8
frontend/src/App.svelte
Normal file
8
frontend/src/App.svelte
Normal file
|
@ -0,0 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { currentRoute } from "./lib/router";
|
||||
</script>
|
||||
|
||||
<svelte:component
|
||||
this={$currentRoute.component}
|
||||
params={$currentRoute.params}
|
||||
/>
|
23
frontend/src/app.css
Normal file
23
frontend/src/app.css
Normal file
|
@ -0,0 +1,23 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
50
frontend/src/lib/dump.ts
Normal file
50
frontend/src/lib/dump.ts
Normal file
|
@ -0,0 +1,50 @@
|
|||
import streamSaver from "streamsaver";
|
||||
import { zData, type Distribution, zError } from "./schema";
|
||||
|
||||
export async function downloadFile(
|
||||
dataPath: string,
|
||||
datasetId: string,
|
||||
dist: Distribution
|
||||
) {
|
||||
const outputS = streamSaver.createWriteStream(
|
||||
dist.downloadURL.slice(dist.downloadURL.lastIndexOf("/") + 1)
|
||||
);
|
||||
const res = await fetch(
|
||||
`${dataPath}/${datasetId}/${dist.identifier}/${
|
||||
dist.fileName || dist.identifier
|
||||
}.gz`
|
||||
);
|
||||
const ds = new DecompressionStream("gzip");
|
||||
const decompressedStream = res.body!.pipeThrough(ds);
|
||||
await decompressedStream.pipeTo(outputS);
|
||||
}
|
||||
|
||||
async function fetchGzipped(url: string): Promise<Response> {
|
||||
const res = await fetch(url);
|
||||
const ds = new DecompressionStream("gzip");
|
||||
const decompressedStream = res.body!.pipeThrough(ds);
|
||||
const resD = new Response(decompressedStream);
|
||||
return resD;
|
||||
}
|
||||
async function loadGzippedJson(url: string): Promise<unknown> {
|
||||
const res = await fetchGzipped(url);
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
const endpoint = "http://localhost:8081";
|
||||
export const gobData = `${endpoint}/datos.gob.ar_data.json`;
|
||||
export async function fetchData(url: string) {
|
||||
const json = await loadGzippedJson(`${url}/data.json.gz`);
|
||||
console.debug(json);
|
||||
return zData.parse(json);
|
||||
}
|
||||
export async function fetchErrors(url: string) {
|
||||
const res = await fetchGzipped(`${url}/errors.jsonl.gz`);
|
||||
const text = await res.text();
|
||||
const lines = text
|
||||
.split("\n")
|
||||
.filter((line) => !!line)
|
||||
.map((line) => JSON.parse(line))
|
||||
.map((json) => zError.parse(json));
|
||||
return lines;
|
||||
}
|
29
frontend/src/lib/router.ts
Normal file
29
frontend/src/lib/router.ts
Normal file
|
@ -0,0 +1,29 @@
|
|||
import navaid, { type Params } from "navaid";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
import NotFound from "./routes/NotFound.svelte";
|
||||
import DumpIndex from "./routes/DumpIndex.svelte";
|
||||
import Dataset from "./routes/Dataset.svelte";
|
||||
import type { ComponentType } from "svelte";
|
||||
|
||||
export const routes = {
|
||||
DumpIndex: "/d/:dumpUrl",
|
||||
Dataset: "/d/:dumpUrl/dataset/:id",
|
||||
};
|
||||
|
||||
type Route = {
|
||||
component: ComponentType;
|
||||
params?: Params;
|
||||
};
|
||||
export const currentRoute = writable<Route>();
|
||||
|
||||
export const router = navaid(undefined, () =>
|
||||
currentRoute.set({ component: NotFound })
|
||||
);
|
||||
router.on(routes.DumpIndex, (params) =>
|
||||
currentRoute.set({ component: DumpIndex, params })
|
||||
);
|
||||
router.on(routes.Dataset, (params) =>
|
||||
currentRoute.set({ component: Dataset, params })
|
||||
);
|
||||
router.listen();
|
42
frontend/src/lib/routes/Dataset.svelte
Normal file
42
frontend/src/lib/routes/Dataset.svelte
Normal file
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts">
|
||||
import { downloadFile, fetchData, fetchErrors } from "../dump";
|
||||
import NotFound from "./NotFound.svelte";
|
||||
|
||||
export let params: { dumpUrl: string; id: string };
|
||||
const url = decodeURIComponent(params.dumpUrl);
|
||||
|
||||
const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
|
||||
([data, errors]) => ({ data, errors })
|
||||
);
|
||||
</script>
|
||||
|
||||
{#await data}
|
||||
Cargando dataset...
|
||||
{:then { data, errors }}
|
||||
{@const dataset = data.dataset.find((d) => d.identifier === params.id)}
|
||||
{#if !dataset}
|
||||
<NotFound />
|
||||
{:else}
|
||||
<h1>{dataset.title}</h1>
|
||||
<ul>
|
||||
{#each dataset.distribution as dist}
|
||||
{@const error = errors.find(
|
||||
(e) =>
|
||||
e.datasetIdentifier === dataset.identifier &&
|
||||
e.distributionIdentifier === dist.identifier
|
||||
)}
|
||||
<li>
|
||||
{#if error}
|
||||
{dist.title}
|
||||
(no está en este dump porque hubo un error al bajarlo)
|
||||
{:else}
|
||||
<button on:click={() => downloadFile(url, dataset.identifier, dist)}
|
||||
>Download</button
|
||||
>
|
||||
{dist.title}
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{/await}
|
34
frontend/src/lib/routes/DumpIndex.svelte
Normal file
34
frontend/src/lib/routes/DumpIndex.svelte
Normal file
|
@ -0,0 +1,34 @@
|
|||
<script lang="ts">
|
||||
import { inject } from "regexparam";
|
||||
import { downloadFile, fetchData, fetchErrors } from "../dump";
|
||||
import { routes } from "../router";
|
||||
|
||||
export let params: { dumpUrl: string };
|
||||
const url = decodeURIComponent(params.dumpUrl);
|
||||
|
||||
const data = Promise.all([fetchData(url), fetchErrors(url)]).then(
|
||||
([data, errors]) => ({ data, errors })
|
||||
);
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#await data}
|
||||
Cargando..
|
||||
{:then { data, errors }}
|
||||
<h1>{data.title}</h1>
|
||||
<p>{data.description}</p>
|
||||
<ul>
|
||||
{#each data.dataset as dataset}
|
||||
{@const datasetLink = inject(routes.Dataset, {
|
||||
dumpUrl: params.dumpUrl,
|
||||
id: dataset.identifier,
|
||||
})}
|
||||
<li>
|
||||
<a href={datasetLink}>{dataset.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:catch error}
|
||||
Hubo un error intenando cargar este dump. <pre>{error}</pre>
|
||||
{/await}
|
||||
</main>
|
1
frontend/src/lib/routes/NotFound.svelte
Normal file
1
frontend/src/lib/routes/NotFound.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<h1>Esa página no pudo ser encontrada.</h1>
|
36
frontend/src/lib/schema.ts
Normal file
36
frontend/src/lib/schema.ts
Normal file
|
@ -0,0 +1,36 @@
|
|||
import z from "zod";
|
||||
|
||||
export const zPublisher = z.object({
|
||||
mbox: z.string().optional(),
|
||||
name: z.string(),
|
||||
});
|
||||
export const zDistribution = z.object({
|
||||
identifier: z.string(),
|
||||
downloadURL: z.string(),
|
||||
fileName: z.string().optional(),
|
||||
format: z.string().optional(),
|
||||
title: z.string(),
|
||||
description: z.string().optional(),
|
||||
});
|
||||
export type Distribution = z.infer<typeof zDistribution>;
|
||||
export const zDataset = z.object({
|
||||
identifier: z.string(),
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
publisher: zPublisher,
|
||||
distribution: z.array(zDistribution),
|
||||
});
|
||||
export const zData = z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
homepage: z.string(),
|
||||
dataset: z.array(zDataset),
|
||||
});
|
||||
|
||||
export const zError = z.object({
|
||||
url: z.string(),
|
||||
datasetIdentifier: z.string(),
|
||||
distributionIdentifier: z.string(),
|
||||
kind: z.enum(["generic_error", "http_error", "infinite_redirect"]),
|
||||
error: z.string().optional(),
|
||||
});
|
8
frontend/src/main.ts
Normal file
8
frontend/src/main.ts
Normal file
|
@ -0,0 +1,8 @@
|
|||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
2
frontend/src/vite-env.d.ts
vendored
Normal file
2
frontend/src/vite-env.d.ts
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
7
frontend/svelte.config.js
Normal file
7
frontend/svelte.config.js
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
20
frontend/tsconfig.json
Normal file
20
frontend/tsconfig.json
Normal file
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
9
frontend/tsconfig.node.json
Normal file
9
frontend/tsconfig.node.json
Normal file
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
7
frontend/vite.config.ts
Normal file
7
frontend/vite.config.ts
Normal file
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
})
|
Loading…
Reference in a new issue