Restructure with Vite

master
Araozu 2024-02-28 19:56:03 -05:00
parent 6e1d1d13c0
commit ff53bb35be
25 changed files with 914 additions and 8923 deletions

37
.gitignore vendored
View File

@ -1,30 +1,27 @@
.DS_Store # Logs
node_modules logs
/dist *.log
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files # Editor directories and files
.idea
.vscode .vscode
!.vscode/extensions.json
.idea
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw* *.sw?
# Archivos para el deploy
*.js
*.js.map
/srv/mysql.ts
/srv/DatosConexion.ts
# Archivos de Materialize
/src/materialize/

View File

@ -1,26 +1,40 @@
# pseudocloud # pseudosubs1-rewrite
## Project setup This template should help get you started developing with Vue 3 in Vite.
```
npm install ## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
pnpm install
``` ```
### Compiles and hot-reloads for development ### Compile and Hot-Reload for Development
```
npm run serve ```sh
pnpm dev
``` ```
### Compiles and minifies for production ### Type-Check, Compile and Minify for Production
```
npm run build
```
### Run your tests ```sh
``` pnpm build
npm run test
```
### Lints and fixes files
```
npm run lint
``` ```

1
env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli|Open+Sans" rel="stylesheet">
<title>PseudoSubs - Anime de temporada sin distracciones, HD, Full HD, 24 y 60 fps.</title>
<meta name="description" content="Ver anime de temporada nunca fue tan facil. Descarga en 1 click, 0 anuncios,
0 acortadores, 0 ventanas emergentes. La mejor calidad.">
<meta name="keywords" content="Anime, HD, Full HD, gratis, MEGA, Directo, 60fps">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@ -1,47 +1,28 @@
{ {
"name": "pseudocloud", "name": "pseudosubs1-rewrite",
"version": "0.1.0", "version": "0.0.0",
"private": true,
"scripts": { "scripts": {
"start": "vue-cli-service express:run --port 8080", "dev": "vite",
"serve": "vue-cli-service serve", "build": "run-p build-only",
"build": "vue-cli-service build", "preview": "vite preview --port 4173",
"express": "vue-cli-service express:watch", "build-only": "vite build",
"deploy": "gcloud app deploy" "type-check": "vue-tsc --noEmit"
}, },
"dependencies": { "dependencies": {
"connect-history-api-fallback": "^1.6.0", "sass": "^1.71.1",
"express": "^4.18.2", "vue": "^2.7.7",
"mysql": "^2.18.1", "vue-router": "^3.5.4",
"mysql2": "^2.2.0", "yaml": "^2.4.0"
"vue": "^2.7.15",
"vue-class-component": "^6.3.2",
"vue-property-decorator": "^7.3.0",
"vue-router": "^3.6.5",
"yaml": "^1.10.2"
}, },
"devDependencies": { "devDependencies": {
"@types/express": "^4.17.20", "@types/node": "^16.11.45",
"@types/mysql": "^2.15.23", "@vitejs/plugin-legacy": "^2.0.0",
"@types/node": "^10.17.60", "@vitejs/plugin-vue2": "^1.1.2",
"@types/yaml": "^1.9.7", "@vue/tsconfig": "^0.1.3",
"@vue/cli-plugin-typescript": "^3.12.1", "npm-run-all": "^4.1.5",
"@vue/cli-service": "^3.12.1", "terser": "^5.14.2",
"node-sass": "9.0.0", "typescript": "~4.7.4",
"sass": "^1.69.5", "vite": "^3.0.2",
"sass-loader": "^7.3.1", "vue-tsc": "^0.38.8"
"typescript": "^3.9.10", }
"vue-cli-plugin-express": "1.0.2",
"vue-template-compiler": "^2.7.15"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
} }

File diff suppressed because it is too large Load Diff

View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli|Open+Sans" rel="stylesheet">
<title>PseudoSubs - Anime de temporada sin distracciones, HD, Full HD, 24 y 60 fps.</title>
<meta name="description" content="Ver anime de temporada nunca fue tan facil. Descarga en 1 click, 0 anuncios,
0 acortadores, 0 ventanas emergentes. La mejor calidad.">
<meta name="keywords" content="Anime, HD, Full HD, gratis, MEGA, Directo, 60fps">
</head>
<body>
<noscript>
<div class="container center" style="font-family: Muli, sans-serif; font-size: large;">
El mundo está escrito en JavaScript. PseudoSubs también. <br>
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" class="responsive-img" alt="LogoJS"><br>
<br>
Activa JavaScript para disfrutar de lo mejor en anime, a 1080p@60fps. <br>
<a href="https://duckduckgo.com/como%20activar%20javascript" title="Como activar JS" target="_blank">¿Cómo lo hago?</a>
</div>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

View File

@ -38,7 +38,7 @@
</template> </template>
<script> <script>
const YAML = require('yaml'); import YAML from "yaml";
export default { export default {
name: "crear-anime", name: "crear-anime",

View File

@ -24,7 +24,7 @@
</template> </template>
<script> <script>
const YAML = require('yaml'); import YAML from "yaml";
export default { export default {
name: "lista-animes", name: "lista-animes",

View File

@ -13,7 +13,7 @@
</template> </template>
<script> <script>
const YAML = require('yaml'); import YAML from "yaml";
export default { export default {
name: "BarraLateral", name: "BarraLateral",

View File

@ -57,8 +57,7 @@
import AnuncioLocal from './anuncioLocal.vue' import AnuncioLocal from './anuncioLocal.vue'
import ComponenteCarga from '../comp-cargando.vue' import ComponenteCarga from '../comp-cargando.vue'
import { global } from "../../global"; import { global } from "../../global";
import YAML from "yaml";
const YAML = require('yaml');
export default { export default {
name: "Contenido", name: "Contenido",
@ -100,7 +99,7 @@
xhr.onload = () => { xhr.onload = () => {
const data = YAML.parse(xhr.responseText); const data = YAML.parse(xhr.responseText);
if (data.opciones) { if (data && data.opciones) {
vm.datosAnime = data; vm.datosAnime = data;
vm.datosAnimeLinksOpciones = data["opciones"]; vm.datosAnimeLinksOpciones = data["opciones"];
vm.datosAnimeCorrectos = true; vm.datosAnimeCorrectos = true;

View File

@ -26,7 +26,7 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { export default {
name: "NavBar", name: "NavBar",
props: { props: {

View File

@ -40,13 +40,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
// @ts-ignore
import entradaReciente from './entrada-reciente.vue' import entradaReciente from './entrada-reciente.vue'
let posCicloActual = 0; let posCicloActual = 0;
let entradas:HTMLCollection; let entradas;
let intervaloCiclo; let intervaloCiclo;
const ciclarEntradasRecientes = ():void => { const ciclarEntradasRecientes = () => {
// Maldito TS, ¿En serio era necesario que sea tan estricto? // Maldito TS, ¿En serio era necesario que sea tan estricto?
// @ts-ignore // @ts-ignore
entradas = document.getElementById("entradasRecientes").children; entradas = document.getElementById("entradasRecientes").children;

View File

@ -1,21 +1,18 @@
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
Vue.config.productionTip = false; import './sass/main.sass'
require('./sass/main.sass');
(() => { (() => {
// @ts-ignore // @ts-ignore
window.miRouter = router; window.miRouter = router;
// @ts-ignore // @ts-ignore
window.indiceAnimes = {}; window.indiceAnimes = {};
})(); })();
new Vue({ new Vue({
router, router,
render: h => h(App) render: (h) => h(App)
}).$mount('#app'); }).$mount('#app')

View File

@ -1,14 +1,16 @@
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Inicio from './views/Inicio.vue' import Inicio from './views/Inicio.vue'
/// @ts-ignore
import Anime from './views/Anime.vue' import Anime from './views/Anime.vue'
/// @ts-ignore
import AnimeView from './views/AnimeView.vue' import AnimeView from './views/AnimeView.vue'
Vue.use(Router); Vue.use(Router);
const rutas = { const rutas = {
mode: 'history', mode: 'history',
base: process.env.BASE_URL, base: "/",
routes: [ routes: [
{ {
path: '/', path: '/',
@ -28,20 +30,23 @@ const rutas = {
{ {
path: '/a/', path: '/a/',
name: 'Administracion', name: 'Administracion',
/// @ts-ignore
component: () => import('./views/Administracion.vue') component: () => import('./views/Administracion.vue')
}, },
{ {
path: '/cambios', path: '/cambios',
name: 'Lista de Cambios', name: 'Lista de Cambios',
/// @ts-ignore
component: () => import('./views/ListaDeCambios.vue') component: () => import('./views/ListaDeCambios.vue')
}, },
{ {
path: '/nosotros', path: '/nosotros',
name: 'Nosotros', name: 'Nosotros',
/// @ts-ignore
component: () => import('./views/Nosotros.vue') component: () => import('./views/Nosotros.vue')
} }
], ],
scrollBehavior (to: any, from: any, savedPosition: any) { scrollBehavior (to, from, savedPosition) {
// return desired position // return desired position
return { x: 0, y: 0 } return { x: 0, y: 0 }
} }

13
src/shims-tsx.d.ts vendored
View File

@ -1,13 +0,0 @@
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}

4
src/shims-vue.d.ts vendored
View File

@ -1,4 +0,0 @@
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}

View File

@ -44,9 +44,9 @@
<script> <script>
import ListaAnimes from "../components/Administracion/lista-animes"; import ListaAnimes from "../components/Administracion/lista-animes.vue";
import CrearAnime from "../components/Administracion/crear-anime"; import CrearAnime from "../components/Administracion/crear-anime.vue";
const YAML = require('yaml'); import YAML from "yaml";
export default { export default {
name: "Administracion", name: "Administracion",

View File

@ -35,16 +35,16 @@
name: "AnimeView", name: "AnimeView",
components: { components: {
'nav-bar': () => ({ 'nav-bar': () => ({
component: import('../components/AnimeView/NavBar'), component: import('../components/AnimeView/NavBar.vue'),
loading: ComponenteCarga, loading: ComponenteCarga,
delay: 500, delay: 500,
timeout: 5000 timeout: 5000
}), }),
'contenido': () => ({ 'contenido': () => ({
component: import('../components/AnimeView/Contenido') component: import('../components/AnimeView/Contenido.vue')
}), }),
'mi-footer': () => ({ 'mi-footer': () => ({
component: import('../components/mi-footer') component: import('../components/mi-footer.vue')
}), }),
'barra-lateral': BarraLateral 'barra-lateral': BarraLateral
}, },

View File

@ -33,8 +33,11 @@
<script lang="ts"> <script lang="ts">
import tituloPrincipal from '../components/titulo-principal.vue' import tituloPrincipal from '../components/titulo-principal.vue'
import sliderReciente from '../components/slider-reciente.vue' import sliderReciente from '../components/slider-reciente.vue'
// @ts-ignore
import tarjetaMenuPrin from '../components/tarjeta-menu-princ.vue' import tarjetaMenuPrin from '../components/tarjeta-menu-princ.vue'
// @ts-ignore
import featuresCard from '../components/features-card.vue' import featuresCard from '../components/features-card.vue'
// @ts-ignore
import footer from '../components/mi-footer.vue' import footer from '../components/mi-footer.vue'
import { global } from "../global"; import { global } from "../global";

View File

@ -26,7 +26,7 @@
import MiFooter from '../components/mi-footer.vue' import MiFooter from '../components/mi-footer.vue'
import Cambio from '../components/ListaDeCambios/Cambio.vue' import Cambio from '../components/ListaDeCambios/Cambio.vue'
import { global } from "../global"; import { global } from "../global";
const YAML = require('yaml'); import YAML from "yaml";
export default { export default {
name: "ListaDeCambios", name: "ListaDeCambios",

6
srv/DatosConexion.ts Normal file
View File

@ -0,0 +1,6 @@
export const DatosConexion = {
host : 'localhost',
user : 'root',
password : '123456789',
database : 'pseudo'
};

8
tsconfig.config.json Normal file
View File

@ -0,0 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}

View File

@ -1,43 +1,16 @@
{ {
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"compilerOptions": { "compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"removeComments": true,
"types": [
"webpack-env"
],
"paths": { "paths": {
"@/*": [ "@/*": ["./src/*"]
"src/*" }
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}, },
"include": [
"src/**/*.ts", "references": [
"src/**/*.tsx", {
"src/**/*.vue", "path": "./tsconfig.config.json"
"tests/**/*.ts", }
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"dist",
"build",
"node.d.ts"
] ]
} }

21
vite.config.ts Normal file
View File

@ -0,0 +1,21 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import vue2 from '@vitejs/plugin-vue2'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue2(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})