Copy stuff over from the template
This commit is contained in:
15
.editorconfig
Normal file
15
.editorconfig
Normal file
@@ -0,0 +1,15 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
max_line_length = 120
|
||||
tab_width = 2
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[{*.cjs,*.js,*.mjs,*.svelte,*.ts}]
|
||||
indent_size = 3
|
||||
tab_width = 3
|
||||
11
.eslintignore
Normal file
11
.eslintignore
Normal file
@@ -0,0 +1,11 @@
|
||||
.github/
|
||||
dist/
|
||||
docs/
|
||||
lang/
|
||||
packs/
|
||||
scripts/
|
||||
styles/
|
||||
src/**/*.svelte
|
||||
|
||||
# Temporary until ESLint v9 upgrade
|
||||
vite.config.js
|
||||
40
.eslintrc
Normal file
40
.eslintrc
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Loads https://github.com/typhonjs-node-config/typhonjs-config-eslint/blob/master/3.0/basic/es8/server/node/.eslintrc
|
||||
* Loads https://github.com/typhonjs-fvtt/eslint-config-foundry.js/blob/main/0.8.0.js
|
||||
*
|
||||
* NPM: https://www.npmjs.com/package/typhonjs-config-eslint
|
||||
* NPM: https://www.npmjs.com/package/@typhonjs-fvtt/eslint-config-foundry.js
|
||||
*/
|
||||
{
|
||||
// ESLint configs are prone to particular choices, so if the first config below doesn't work for you then replace
|
||||
// with one that you do prefer. The second config defines globals defined in `foundry.js` for use w/ `no-shadow`.
|
||||
"extends": [
|
||||
"@typhonjs-config/eslint-config/esm/2022/browser",
|
||||
"@typhonjs-fvtt/eslint-config-foundry.js"
|
||||
],
|
||||
|
||||
// Defines / overrides a few more environment parameters not provided in the configs above.
|
||||
"env": {
|
||||
"jquery": true
|
||||
},
|
||||
|
||||
// Prevents overwriting any built in globals particularly from `@typhonjs-fvtt/eslint-config-foundry.js`, but also
|
||||
// node & browser environments. `event / window.event` shadowing is allowed due to being a common variable name and
|
||||
// an uncommonly used browser feature.
|
||||
//
|
||||
// Note: if you are using Typescript you must use `@typescript-eslint/no-shadow`
|
||||
"rules": {
|
||||
"no-shadow": ["error", {
|
||||
"builtinGlobals": true,
|
||||
"hoist": "all",
|
||||
"allow": [
|
||||
"document",
|
||||
"event",
|
||||
"name",
|
||||
"parent",
|
||||
"status",
|
||||
"top"
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
.idea
|
||||
.DS_Store
|
||||
.vite-cache/
|
||||
.vscode/**/*
|
||||
!.vscode/extensions.json
|
||||
dist/
|
||||
node_modules/
|
||||
9
jsconfig.json
Normal file
9
jsconfig.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"compilerOptions" : {
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"module": "ES2022",
|
||||
"moduleResolution" : "Bundler",
|
||||
"target": "ES2022"
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
5
lang/en.json
Normal file
5
lang/en.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"TemplateESM": {
|
||||
"title": "Template Svelte (ESM)"
|
||||
}
|
||||
}
|
||||
45
module.json
Normal file
45
module.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"id": "template-svelte-esm",
|
||||
"title": "Template Svelte (ESM)",
|
||||
"description": "Provides a bare-bones Foundry module template repo to get set up with using the TyphonJS Runtime Library and Svelte with ES Modules.",
|
||||
"version": "0.0.0",
|
||||
"authors": [
|
||||
{
|
||||
"name": "YOUR NAME HERE",
|
||||
"url": "YOUR URL HERE"
|
||||
}
|
||||
],
|
||||
"compatibility": {
|
||||
"minimum": "12",
|
||||
"verified": "12"
|
||||
},
|
||||
"esmodules": [
|
||||
"dist/template-svelte-esm.js"
|
||||
],
|
||||
"styles": [
|
||||
"dist/template-svelte-esm.css"
|
||||
],
|
||||
"flags": {
|
||||
"hotReload": {
|
||||
"extensions": ["json"],
|
||||
"paths": ["lang"]
|
||||
}
|
||||
},
|
||||
"languages": [
|
||||
{
|
||||
"lang": "en",
|
||||
"name": "English",
|
||||
"path": "lang/en.json"
|
||||
}
|
||||
],
|
||||
"socket": false,
|
||||
"url": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm",
|
||||
"readme": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm/blob/master/README.md",
|
||||
"bugs": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm/issues",
|
||||
"changelog": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm/releases/latest/",
|
||||
"manifest": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm/releases/latest/download/module.json",
|
||||
"download": "https://github.com/typhonjs-fvtt-demo/template-svelte-esm/releases/download/0.0.0/module.zip",
|
||||
"protected": false,
|
||||
"coreTranslation": false,
|
||||
"library": false
|
||||
}
|
||||
6084
package-lock.json
generated
Normal file
6084
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"description": "Provides a bare-bones Foundry module template repo to get set up with using the TyphonJS Runtime Library and Svelte with ES Modules.",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"author": "YOUR INFO HERE",
|
||||
"contributors": [
|
||||
"YOUR INFO HERE"
|
||||
],
|
||||
"imports": {
|
||||
"#runtime/*": "@typhonjs-fvtt/runtime/*",
|
||||
"#standard/*": "@typhonjs-fvtt/standard/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@typhonjs-fvtt/runtime": "^0.2.0",
|
||||
"@typhonjs-fvtt/standard": "^0.2.0",
|
||||
"svelte": "^4.2.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@typhonjs-config/eslint-config": "^0.6.0",
|
||||
"@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
|
||||
"eslint": "^8"
|
||||
},
|
||||
"browserslist": [">5%", "not IE 11"],
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"eslint": "eslint ."
|
||||
}
|
||||
}
|
||||
3
src/index.js
Normal file
3
src/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import { BasicApp } from './view/BasicApp.js';
|
||||
|
||||
Hooks.once('ready', () => new BasicApp().render(true, { focus: true }));
|
||||
26
src/view/BasicApp.js
Normal file
26
src/view/BasicApp.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { SvelteApp } from '#runtime/svelte/application';
|
||||
import { deepMerge } from '#runtime/util/object';
|
||||
|
||||
import BasicAppShell from './BasicAppShell.svelte';
|
||||
|
||||
export class BasicApp extends SvelteApp
|
||||
{
|
||||
/**
|
||||
* Default Application options
|
||||
*
|
||||
* @returns {SvelteApp.Options} options - SvelteApp options.
|
||||
* @see https://typhonjs-fvtt-lib.github.io/api-docs/interfaces/_runtime_svelte_application.SvelteApp.Options.html
|
||||
*/
|
||||
static get defaultOptions()
|
||||
{
|
||||
return deepMerge(super.defaultOptions, {
|
||||
title: 'TemplateESM.title', // Automatically localized from `lang/en.json`.
|
||||
width: 300,
|
||||
|
||||
svelte: {
|
||||
class: BasicAppShell,
|
||||
target: document.body
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
24
src/view/BasicAppShell.svelte
Normal file
24
src/view/BasicAppShell.svelte
Normal file
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import { ApplicationShell } from '#runtime/svelte/component/application';
|
||||
|
||||
export let elementRoot;
|
||||
</script>
|
||||
|
||||
<!-- This is necessary for Svelte to generate accessors TRL can access for `elementRoot` -->
|
||||
<svelte:options accessors={true}/>
|
||||
|
||||
<!-- ApplicationShell provides the popOut / application shell frame, header bar, content areas -->
|
||||
<!-- ApplicationShell exports `elementRoot` which is the outer application shell element -->
|
||||
<ApplicationShell bind:elementRoot>
|
||||
<main>
|
||||
<h1>Basic application</h1>
|
||||
</main>
|
||||
</ApplicationShell>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
122
vite.config.js
Normal file
122
vite.config.js
Normal file
@@ -0,0 +1,122 @@
|
||||
/* eslint-env node */
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
import {
|
||||
postcssConfig,
|
||||
terserConfig } from '@typhonjs-fvtt/runtime/rollup';
|
||||
|
||||
import { sveltePreprocess } from 'svelte-preprocess';
|
||||
|
||||
import moduleJSON from './module.json' with { type: 'json' };
|
||||
|
||||
// ATTENTION!
|
||||
// Please modify the below variables: s_PACKAGE_ID and s_SVELTE_HASH_ID appropriately.
|
||||
|
||||
const s_PACKAGE_ID = `modules/${moduleJSON.id}`;
|
||||
|
||||
// A short additional string to add to Svelte CSS hash values to make yours unique. This reduces the amount of
|
||||
// duplicated framework CSS overlap between many TRL packages enabled on Foundry VTT at the same time. 'tse' is chosen
|
||||
// by shortening 'template-svelte-esm'.
|
||||
const s_SVELTE_HASH_ID = 'tse';
|
||||
|
||||
const s_COMPRESS = false; // Set to true to compress the module bundle.
|
||||
const s_SOURCEMAPS = true; // Generate sourcemaps for the bundle (recommended).
|
||||
|
||||
export default ({ mode }) =>
|
||||
{
|
||||
// Provides a custom hash adding the string defined in `s_SVELTE_HASH_ID` to scoped Svelte styles;
|
||||
// This is reasonable to do as the framework styles in TRL compiled across `n` different packages will
|
||||
// be the same. Slightly modifying the hash ensures that your package has uniquely scoped styles for all
|
||||
// TRL components and makes it easier to review styles in the browser debugger.
|
||||
const compilerOptions = mode === 'production' ? {
|
||||
cssHash: ({ hash, css }) => `svelte-${s_SVELTE_HASH_ID}-${hash(css)}`
|
||||
} : {};
|
||||
|
||||
/** @type {import('vite').UserConfig} */
|
||||
return {
|
||||
root: 'src/', // Source location / esbuild root.
|
||||
base: `/${s_PACKAGE_ID}/dist`, // Base module path that 30001 / served dev directory.
|
||||
publicDir: false, // No public resources to copy.
|
||||
cacheDir: '../.vite-cache', // Relative from root directory.
|
||||
|
||||
resolve: {
|
||||
conditions: ['browser', 'import']
|
||||
},
|
||||
|
||||
esbuild: {
|
||||
target: ['es2022']
|
||||
},
|
||||
|
||||
css: {
|
||||
// Creates a standard configuration for PostCSS with autoprefixer & postcss-preset-env.
|
||||
postcss: postcssConfig({ compress: s_COMPRESS, sourceMap: s_SOURCEMAPS })
|
||||
},
|
||||
|
||||
// About server options:
|
||||
// - Set to `open` to boolean `false` to not open a browser window automatically. This is useful if you set up a
|
||||
// debugger instance in your IDE and launch it with the URL: 'http://localhost:30001/game'.
|
||||
//
|
||||
// - The top proxy entry redirects requests under the module path for `style.css` and following standard static
|
||||
// directories: `assets`, `lang`, and `packs` and will pull those resources from the main Foundry / 30000 server.
|
||||
// This is necessary to reference the dev resources as the root is `/src` and there is no public / static
|
||||
// resources served with this particular Vite configuration. Modify the proxy rule as necessary for your
|
||||
// static resources / project.
|
||||
server: {
|
||||
port: 30001,
|
||||
open: '/game',
|
||||
proxy: {
|
||||
// Serves static files from main Foundry server.
|
||||
[`^(/${s_PACKAGE_ID}/(assets|lang|packs|dist/${moduleJSON.id}.css))`]: 'http://localhost:30000',
|
||||
|
||||
// All other paths besides package ID path are served from main Foundry server.
|
||||
[`^(?!/${s_PACKAGE_ID}/)`]: 'http://localhost:30000',
|
||||
|
||||
// Rewrite incoming `module-id.js` request from Foundry to the dev server `index.js`.
|
||||
[`/${s_PACKAGE_ID}/dist/${moduleJSON.id}.js`]: {
|
||||
target: `http://localhost:30001/${s_PACKAGE_ID}/dist`,
|
||||
rewrite: () => '/index.js',
|
||||
},
|
||||
|
||||
// Enable socket.io from main Foundry server.
|
||||
'/socket.io': { target: 'ws://localhost:30000', ws: true }
|
||||
}
|
||||
},
|
||||
|
||||
build: {
|
||||
outDir: '../dist',
|
||||
emptyOutDir: false,
|
||||
sourcemap: s_SOURCEMAPS,
|
||||
brotliSize: true,
|
||||
minify: s_COMPRESS ? 'terser' : false,
|
||||
target: ['es2022'],
|
||||
terserOptions: s_COMPRESS ? { ...terserConfig(), ecma: 2022 } : void 0,
|
||||
lib: {
|
||||
entry: './index.js',
|
||||
formats: ['es'],
|
||||
fileName: moduleJSON.id
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Rewrite the default style.css to a more recognizable file name.
|
||||
assetFileNames: (assetInfo) =>
|
||||
assetInfo.name === 'style.css' ? `${moduleJSON.id}.css` : assetInfo.name,
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
// Necessary when using the dev server for top-level await usage inside TRL.
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: 'es2022'
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
svelte({
|
||||
compilerOptions,
|
||||
preprocess: sveltePreprocess()
|
||||
})
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user