Comments (13)
The planned way forward with this is sveltejs/kit#518 which will replace this whole template repo and will also handle preprocessors.
from component-template.
Copying a piece of a conversation from chat from last month, so it has a more permanent home:
@Conduitry: Oh, I just had an idea: A one-off rollup plugin, embedded in rollup.config.js. That would be an easy way to find out about all of the components. It could also write out the preprocessed versions, and then pass along the component unchanged for the other plugins
@Conduitry: I haven't worked out how the entry point index.js should be handled yet
@pngwn: couldn't you just literally dupe it into the svelte dist path?
@pngwn: it should basically be identical as far as i can tell
@pngwn: But that sounds like a nice solution and we don't need random scripts sitting around, or need to parse the js entryfile to an ast to pull out the required information, rollup can do the heavy lifting.
from component-template.
What's the process that's happening when we use the process feature?
Does Svelte transpiles the component into a preprocessors-free component before compiling it or compiles it directly?
from component-template.
Yeah. svelte.preprocess
takes an invalid svelte component allows you to perform arbitrary transforms and returns an object containing a string that should be valid svelte component that can be fed directly to the compiler.
from component-template.
The bundler plugins call svelte.preprocess()
on the files and then pass the output to svelte.compile()
.
from component-template.
So couldn't we just add an output
option to the preprocess
function that makes Svelte output the file before compiling it?
from component-template.
svelte.preprocess
already outputs a svelte component, it is completely separate to the compiler, it is just the bundler plugins that integrate the two into a single step. I don't think short-circuiting the bundling process in the bundler plugins based on an option is a good idea, it could accidentally be switched on leading to very unexpected behaviour. This should be easy to handle in its own plugin.
from component-template.
To make this simpler, I think it might be a good idea to make the pkg.svelte
entry point of the package always be a .js
file that re-exports the component or components. I guess this would mean something like export { default as default } from './Component.svelte';
. People could edit that freely if they added more components. The one-off rollup plugin could copy over each file it encounters from src
to dist
- preprocessing .svelte files and leaving others untouched. I also think it makes sense to have this copying into dist
always happen, even if there is no preprocessing. We don't want the build process to have to worry about (or have the directory layout change depending on) whether there are multiple components or whether there are preprocessors.
from component-template.
ay yo, i found a way we could use svelte.preprocess to spit out vanilla .svelte files for consumers that do not use a specific preprocessor. its not much right now but could be a stepping stone?
forgive the code formatting, i am using prettier 2.1.0 and it isn't playing well with svelte right now.
sample compile script
import { preprocess } from 'svelte/compiler';
import autoprocessor from 'svelte-preprocess';
import * as fs from 'fs';
const doStuff = async () => {
const source = fs.readFileSync(
`${__dirname}/src/Button/Button.svelte`,
'utf-8'
);
await preprocess(source, autoprocessor(), { filename: 'Button.svelte' })
.then((item) => {
console.log('Svelte Code: ', item.code);
fs.mkdirSync(`${__dirname}/dist/Button/`, {
recursive: true,
});
fs.writeFileSync(`${__dirname}/dist/Button/Button.svelte`, item.code);
})
.catch((error) => {
console.error(error.message);
});
};
doStuff();
src svelte
<script lang="ts">
export let text = '';
export let rounded: boolean = false;
export let circle: boolean = false;
let buttonElement: HTMLElement;
let spanElement: HTMLElement;
let mouseX: number;
let mouseY: number;
function clickEvent(e: MouseEvent) {
var { left, top } = buttonElement.getBoundingClientRect();
mouseX = e.clientX - left;
mouseY = e.clientY - top;
spanElement.style.left = `${mouseX}px`;
spanElement.style.top = `${mouseY}px`;
}
</script>
<style lang="scss">
button {
position: relative;
overflow: hidden;
padding: 8px 16px;
border: solid thin black;
background-color: inherit;
color: black;
cursor: pointer;
font-size: inherit;
outline: none;
transition: all 0.3s;
&:hover {
background-color: lightgrey;
}
& > span {
position: absolute;
display: none;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
animation: ripple 1s;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
content: '';
opacity: 0;
transition: background-color 0.3s;
}
&:focus:not(:active) span {
display: block;
}
}
@keyframes ripple {
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(10);
}
}
.rounded {
border-radius: 5px;
}
.circle {
padding: 8px;
border-radius: 50%;
}
</style>
<template>
<button
class:rounded
class:circle
on:click={clickEvent}
bind:this={buttonElement}>
<slot />
{text}
<span class="active" bind:this={spanElement} />
</button>
</template>
dist svelte
<script>
export let text = '';
export let rounded = false;
export let circle = false;
let buttonElement;
let spanElement;
let mouseX;
let mouseY;
function clickEvent(e) {
var { left, top } = buttonElement.getBoundingClientRect();
mouseX = e.clientX - left;
mouseY = e.clientY - top;
spanElement.style.left = `${mouseX}px`;
spanElement.style.top = `${mouseY}px`;
}
</script>
<style>
button {
position: relative;
overflow: hidden;
padding: 8px 16px;
border: solid thin black;
background-color: inherit;
color: black;
cursor: pointer;
font-size: inherit;
outline: none;
transition: all 0.3s; }
button:hover {
background-color: lightgrey; }
button > span {
position: absolute;
display: none;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
animation: ripple 1s;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
content: '';
opacity: 0;
transition: background-color 0.3s; }
button:focus:not(:active) span {
display: block; }
@keyframes ripple {
from {
opacity: 1;
transform: scale(0); }
to {
opacity: 0;
transform: scale(10); } }
.rounded {
border-radius: 5px; }
.circle {
padding: 8px;
border-radius: 50%; }
</style>
<button
class:rounded
class:circle
on:click={clickEvent}
bind:this={buttonElement}>
<slot />
{text}
<span class="active" bind:this={spanElement} />
</button>
from component-template.
I am using @use
statements with scss and it cannot resolve file paths:
<style lang="scss" global>
@use "./Alert.scss";
</style>
Can't find stylesheet to import.
╷
2 │ @use "./Alert.scss";
│ ^^^^^^^^^^^^^^^^^^^
╵
I solved this problem using process.chdir
from component-template.
Any news on this?
I have a Svelte component where I use SASS, and I would like to prevent consumers from having to configure SASS themselves. So ideally, I would like to publish my component in such a way that SASS is already preprocessed.
I tried the proof of concept posted by @BlackFenix2 in #8 (comment) which looks like it should do the trick, but can't get that working for SASS unfortunately.
from component-template.
Thanks @Conduitry for your fast response, I actually commented there some time ago 😁. Makes sense to focus effort on SvelteKit, I'm really looking forward to that. I started using Svelte not that long ago, and right now I feel like I'm in no man's land - just trying to get something working for the time being.
from component-template.
Closing in favour of focusing on svelte-kit package
from component-template.
Related Issues (18)
- Repository as template
- Binding a DOM element doesn't work when imported in a different project HOT 1
- Build error: " `this` has been rewritten to `undefined` " HOT 2
- Advanced examples with multiple components? HOT 7
- warning: option.name should be capitalized
- some documentation suggestions HOT 1
- Storybook implementation HOT 3
- Document how to use a component outside of svelte HOT 2
- Add a TypeScript component template HOT 19
- Local dev server for building and testing components HOT 12
- What is the meaning of these lines in rollup.config.js? HOT 5
- Why does it need to be a template only project, why not a full CLI? HOT 4
- emitCss HOT 1
- Upgrade template for v3 of Svelte HOT 7
- Custom Element build target is missing HOT 2
- ES5 transpiling ? HOT 3
- how to use it? what is .mjs file? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from component-template.