Currently using Sapper to create a design system app.
I have a heirachy of folders which create the app through the routes folder.
The folder structure looks something like this:
design-foundations
- interactions
-- buttons
-- inputs
- components
-- header
Here is a look at my design-foundations/interactions/buttons.html:
<Layout>
<h1>Buttons</h1>
</Layout>
<script>
import Layout from '../../_components/helpers/Layout.html';
export default {
components: {
Layout
}
};
</script>
If you were to open up my design-foundations/interactions/inputs.html file, or any of the other files under design-foundations, you will see a file which looks very much the same, where the bottom part of the file exports the Layout component.
Is there some way I can avoid this code duplication in my files?
I would really like to somehow avoid the tag at the end of each of these files if somehow possible.
This might not be the answer you are after, but you no longer need to load the layout into your component, rather the component is now loaded in the layout. Upgrade to the latest version of Sapper and you will see the directory structure changes along with the new App.html that you need to add in your code.
Related
I have two module let call it ModuleA and ModuleB
That are pure html/js/css without library.
The code is pretty separate for maintining purpose.
I want a ModuleManager page that load ModuleA and in some input go to ModuleB and then can rego on ModuleA
I have a jsScript on ModuleManager page and with window.location.replace('./ModuleA/index.html')
I can load my ModuleA or my ModuleB but after the replace my js script
who listen to window.addEventListener('keydown') from ModuleManager got disable because im not on ModuleManager page DOM anymore and this seem to destroy my js. A console log in while stop as soon as i replace.
At first i was staying on my ModuleManager page and loading MyModule as iframe
<iframe style="border: 0;" src="./ModuleA/index.html" width="100%" height="100%"/>
But as my Iframe is the full page. And foreground the iframe specification make myListener not triggering event anymore as well.
A simple workAround is add inside ModuleA and ModuleB 2 keyDown Listener witch go to other module. But then my Module know each other and i don't like this. Because when il will add more module i don't want to add gestion in every existing module.
My folder kinda look like this
/(Folder /mysite.com)
|-->index.html (ModuleManager)
|-->ModuleA (Folder)
|--> index.html (ModuleA)
|-->ModuleB (Folder)
|--> index.html (ModuleB)
And module are accesible and working allAlone by mysite.com/ModuleA or ModuleA.mysite.com
ModuleA and ModuleB can be fullFonctionalSite with unlimited subfolder.
Usualy i would use nginx to a think like this but i want when on module Manage to keep a context et switch to a module or another seemlesly.
I also try to add all content of ModuleA/index.html inside a div in ContentManager. But ModuleA refere to a lot of ./thins.js ./subfolder/view.html and all this relative path got broke cause index.html include path context become /index.html and not /ModuleA/index.html
So it broke both Module and if i want to fix pathing like '/ModuleA/thing.js' in ModuleA/index.html it work for mysite.com/ModuleA/thing.js
But broke on ModuleA.mysite.com/thing.js
The way i see it tp make it possible is stay on the same page context all time. OR keeing a windows.JSManagerClass ok navigator.JSManagerClass that trigger a onLoad every time i change loc and register the keydown listener or keep it active
So anyway to manage this? What i want to do is it even possible?
Does some lib provide a thing like this? i could look at?
I feel like i miss the obvious way to do it
It sounds a lot like you want to make a single page application (SPA).
If not, I'm sorry if I've misunderstood you.
There is a couple of great frameworks/libraries you can look into:
React
Vue
Angular
Svelte
Personally I know and use React.
I am not trying to be oppinionated, but since I don't know so much about the other frameworks, I can only speak for React.
Maybe someone else could talk about these or other frameworks/libraries and what makes them great/usefull?
A short and basic explanation about React:
It holds a single index.html file and all content is created with Javascript using an html -like syntax called JSX.
You can install a router (react-router) that handles routes/navigation between views/pages.
Because it is an SPA, you have "access" to all components (modules) at all times and makes the problems you deal with seem trivial.
The official site (where most, if not all examples are using old class based component syntax): reactjs.org
The official beta site for the newer function based component syntax (with hooks): beta.reactjs.org (you should aim towards coding this way).
I've created a simple app with create-react-app. This configures webpack loaders for svg files to copy the files and put a public file into the constant. So the following code
import mysvg from "./img/my.svg";
console.log(mysvg)
prints /static/media/my.svg. That's fine.
But when editing/running the same project in codesandbox it tries to read the svg file (e.g. printing errors about ReactComponent if it's not a proper svg), and makes the handling different. Obviously, I could use the "public" folder instead, but I'd like to use the hash feature of production builds etc.
So my question is, how can I allow to use the same mechanism to get a resolving url path (e.g. valid for img src) in codesandbox and use the default create-react-app configuration?
Answer from the codesandbox team: it is a known issue tracked on their github repository.
I did some digging, and I think this is definitely a bug with codesandbox.
When we use a .png image, the string path looks like this:
path: https://uploads.codesandbox.io/uploads/user/ff71cfab-643a-41c7-8358-d13e8ce686c9/U6zD-unsplash1.png
But when we use an SVG, things fail.
Some similar issues opened on their github repo: #1664, #3825.
The maintainer said that svg-react-loader is included in CRA v2 template, and you can import them as ReactComponent, I assume this is what you were talking about initially. I think this is what caused svg files to be treated differently by codesandbox.
For now, I guess you can do this hacky workaround:
import mysvg from "!raw-loader!./img/my.svg.txt";
// inside render
<span dangerouslySetInnerHTML={{ __html: mysvg }} />
sandbox here
You would need to add raw-loader as dependency and rename the file to .txt extension so that it doesn't get handled like an .svg.
Long term, I think the best we could do is to participate in #3825 and hope that this can get fixed by codesandbox.
If you're want to use svg images,only importing them as React Components, like this,import {ReactComponent as MySvg} from './img/my.svg' usually always works. There are other ways as well but I think this one is simplest.
Check out my solution -
myVersionOfCodesandbox
Is it possible to build a Vue app, which does not require Vue as as a dependency at runtime?
I.e. instead of the browser having to load the vue.js and the app like this
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.myxyzhost.com/my-app.js"></script>
have a my-app.js which already includes vue.js, so that including the script in a web page becomes a simple one liner?
<script src="https://www.myxyzhost.com/my-app.js"></script>
So, it was actually simpler than I thought:
I just created a separate entry file for webpack to consume like
my-custom-component-entry.js
and slammed everything I needed in there (vue and the respective component):
// This is the actual solution, I was looking for.
import Vue from 'vue';
import MyCustomComponent from './components/my-custom-component.vue';
new Vue({
components: {
'my-custom-component': MyCustomComponent
}
}).$mount('#app'); // ya gotta have a #app element somewhere of course
And then I built it with webpack (I am not going into detail here).
Now everything is packed in on file. No separate Vue runtime, which a customer might need to install. All that's necessary is:
<script src="https://www.myxyzhost.com/dist/my-custom-component.js"></script>
And yes, as always, this screws up, if you don't add the proper polyfills for internet explorer, but I take that for granted.
The important thing: for modern browsers it's a one liner which makes it easier to sell. That was all I needed.
I'm using Intellij IDEA with Vue plugin to create an SPA. As most of my views are getting big, I decided to separate them in template/script/css files. But IDEA is having some problems in finding the components I'm declaring in the .js file, so I tried to do the following:
<script src="./component-name.js">
import ComponentName from './ComponentName';
export default {
components: {
ComponentName
}
}
</script>
With that, IDEA recognizes the components and offers autocomplete/go-to definitions and all the stuff it should. But I'm wondering if there are any downsides to that? I know having content inside a script tag when using src isn't recommended in pure HTML5, but is that a problem here? I'm guessing it's ignored by webpack as I haven't had any problem with my application.
I recently started using webpack in my ASP.Net project, and I just wanted to add a new react component as well now.
The following problem just came up for me. I did import my react component in the index file and it gets packed with webpack without any problems.
However, I am loading the bundle.js which webpack outputs in a shared page.
The problem I am facing is the following now:
In the file which contains my react component declaration, let's call it Post.jsx, I am calling ReactDOM.render(<PostFeed />, document.getElementById('postFeed'));. Now, as stated, the bundle.js is being loaded on a shared view, so every page initially calls the render function at some point. However, the element 'postFeed' which the component is being rendered inside, is only available when the user navigates to a specific page.
What options do I now have in order to only render my component when I navigated on a certain page? Can I somehow reliably determine this from javascript? I would really like to keep the comfort webpack provides, but I know when there is no other choice I could also split my Post.jsx file and add it as a script in the html code for the specific in which the component does find its element.
Any advice?