Svelte main framework framework

An example of a project on a reactive framework (the page interface automatically and constantly reacts to changes in data on it) framework Svelte… Swelt easily integrates into any web programming language where it works JavaScript…

Standard file structure in Svelte:

Let’s take a look at the main directories and files separately. Those directories or files that will not be described below, but are present in the images, are optional.

svelte / rollup.config.js

The svelte config builds on the basics of the rollup.js builder.

Inside, we import the modules we need in the project that are responsible for processing images, styles, JavaScript code and templates on Svelte.

Working code example:

import svelte from ‘rollup-plugin-svelte’;
import resolve from ‘@ rollup / plugin-node-resolve’;
import commonjs from ‘@ rollup / plugin-commonjs’;
import livereload from ‘rollup-plugin-livereload’;
import {terser} from ‘rollup-plugin-terser’;
import copy from ‘rollup-plugin-copy’

const production = !process.env…ROLLUP_WATCH;

// SCSS
import sveltePreprocess from ‘svelte-preprocess’;

const preprocess = sveltePreprocess({
postcss: {
plugins: [require(‘autoprefixer’)],
},
},
);

export default [
{
input: ‘templates/portfolio.js’,
output: {
sourcemap: true,
format: ‘iife’,
file: ‘public/portfolio/build/portfolio.js’,
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we’ll extract any component CSS out into
// a separate file – better for performance
css: css => {
css.write(‘public/portfolio/build/portfolio.css’);
},

// SCSS
preprocess,
}),

// If you have external dependencies installed from
// npm, you’ll most likely need these plugins. In
// some cases you’ll need additional configuration –
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: [‘svelte’]
}),
commonjs(),

// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),

// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload(‘public / portfolio’),

// If we’re building for production (npm run build
// instead of npm run dev), minify
production && terser(),

copy({
targets: [
{src: ‘templates/img/*’, dest: ‘public/portfolio/build/img’}
]
})

],
watch: {
clearScreen: false
}
}
];

function serve() {
let started = false;

return {
writeBundle() {
if (!started) {
started = true;

require(‘child_process’)…spawn(‘npm’, [‘run’, ‘start’, ‘–‘, ‘–dev’], {
stdio: [‘ignore’, ‘inherit’, ‘inherit’],
shell: true
});
}
}
};
}

svelte / templates /

The template directory looks like this:

svelte / templates / portfolio.js

This is the main connection file of the template. Inside the code:

import Portfolio from ‘./Portfolio.svelte’;

const portfolio = new Portfolio({
target: document.body,
props: {
name: ‘Portfolio’
}
});

export default [
{portfolio}
];

svelte / templates / Portfolio.svelte

This is a regular svelte template.

The file structure has three parts:

1. Scripts (imports) and js code

import Settings from ‘./portfolio/Settings.svelte’;
import {getCookieName, getFetch} from “./main”;

let nameOfShare = getCookieName(‘nameOfShare’);
let ticker = getFetch(‘get-share-in-portfolio /’ + nameOfShare);
script>

2. The main block of code

3. Styles.

Styles can be global (import from another file) or specific (if styles are written inside the template) for the current file (template).

It might be normal css or preprocessor scss… (If enabled in the rollup.config.js file. We have it connected.)

…tables–column {
margin: 8px 0 0;
}
style>

svelte / public / portfolio

svelte / public / portfolio / index.html

The content of the file (connects our js, which consists of the page and styles to it):

<html lang=“en”>
<head>
<meta charset=‘utf-8’>
<meta name=‘viewport’ content=‘width = device-width, initial-scale = 1’>
<title>Portfolio</title>

</body>
</html>

svelte / public / portfolio / build

The contents of this directory will be generated automatically when we run:

Svelte main framework framework

svelte / rollup.config.js