A svelte app targeted for mobile will be emulated online (a mobile drawing with the actual app rendered inside). Because of media queries (which don't work since the app is the whole page and not just the mobile drawing content), my best solution would be that the app should be inside of an iframe.
Is there a way of doing that without actually writing another svelte app that encapsulates the former? Since it will bundle everything together. I could deal with sapper settings to control that, but it seems a little messy to me. As is distorting CSS to emulate media queries, toggling all back when released to production target.
I would then be running two diferent sapper CLI's dev servers, package.json's, git repos, etc. Also have to think about deploy, regarding two public/dist folders and their paths/routes.
Any other thoughts?
EDIT: to be more clear, I have essentially 4 options:
1 - adapt CSS without media queries and vh/vw units (way to hard and sometimes maybe impossible)
2 - emulator as component (but where would iframe src point to?)
3 - set two rollup outputs, maybe app is a hydratable component. Iframe would point to output 2 (how to coordinate that? index1 vs index2? same public folder with 2 rendered parts of an app)
4 - two independent apps, the whole thing (how to deploy? two webservers could do, but ideally it should become one final app)
Hope it is clearer
You can use just select the target to be iframe body. More info about how to create a svelte component https://svelte.dev/docs#Client-side_component_API
import App from './App.svelte';
const iframe = document.createElement("iframe");
iframe.onload = (ev) => {
const app = new App({
target: iframe.contentWindow.document.body,
props: {
name: 'world'
}
});
};
document.body.append(iframe);
if I got you right.
how about packing into a scrollable div?
your svelte app is packaged into a bundle.js. Rename index.html to sth.html and then iframe src=sth.html in the new index.html
Related
In Nextjs 13 there is a reference to creating a layout.js file that replaces the app and document files, but they state that If you are using any React Context providers, they will need to be moved to a Client Component.
What does that mean exactly? The files should not be upgraded or you should mark 'use client' in the layout.js file?
next-13 app directory rendered on the server by default. Context api is used on client side. You do not have to use app directory. you can still use pages directory and wrap the app with Context Provider. But this approach is very expensive and cause to many unnecessary rerenders when the context value changes.
Looks like in next-13, will layout.js file, we are going to break the application state into smaller chunks.
Layouts: Easily share UI between routes while preserving state and
avoiding expensive re-renders.
Imagine you have blogs and 'dashboarddirectories insideappdirectory. In eachlayout.js`, you can fetch data, create some state and pass them to its own children via the prop drilling. In that way, we will kinda have a modular state. new layout system will avoid unnecessary re-renders.
Imagine your app was wrapped by ContextProvider and [slug] component was causing a state change in the ContextProvider, so your entire app will be rerendering. but if you keep the top level data for [slug] component inside blog layout, state change in layout will only rerender this layput's children components
If you want to opt out server component and choose to use use client directive, you can use createContext and this time each tree will have their own context
I have built my app with React Boilerplate, and have been surprised to find all my CSS modules are not generating CSS as I thought, but the CSS is instead generated from JS and embedded in the header of the page. The image below shows just some of the many, many style elements that appear in my header after the page has loaded.
For development, I can see this making sense for HMR etc. However, for a production build, it is not what I would expect.
I would think the most performant build (ie, best) would be a static CSS file alongside the js. In fact, in our production build there is a lot of stutter as the site loads and applies styles to the elements in a staggered manner.
It seems straight-forward to build a static CSS file, so why isn't it the default (especially for RBP, whose major claim is that it is production-ready). After 5 mins of searching I found https://github.com/webpack-contrib/mini-css-extract-plugin, which seems to do exactly what I want.
Is there a benefit to dynamically adding the CSS in the document header as pictured? Is there anything we would lose if we built a static CSS document instead?
I've just inherited a large React project. I do not have much experience with React but I'm trying to make some improvements where I know how.
One issue we have is that our main CSS file is huge and one of the main reasons for this is that a bunch of images used in background-image properties have been embedded as Data-URIs despite them being set to relative URLs in the original SASS files.
These images are used multiple times throughout the app and so we end up with a final CSS file that has the same images embedded multiple times!
The application is built using react-scripts build which I believe is the culprit. As stated here:
To reduce the number of requests to the server, importing images that
are less than 10,000 bytes returns a data URI instead of a path.
I don't want this. Is there a way I can disable this? The project isn't using Webpack or any other build tool/bundler. All I have is the scripts in package.json to play with.
I'm not sure if you can do this with a simple toggle, since create-react-app isn't very customizable by design.
In order to change any configuration you'd like, you have a couple of options:
Forking the configuration (https://auth0.com/blog/how-to-configure-create-react-app/), which allows you to modify the configuration but still stay within create-react-app's boundaries.
Ejecting (https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) which will irreversably give you full power over the build configuration (which means you also have to maintain it going forward).
I am trying to move the front-end part of a website to Angular 2.
Currently I have really big ASP.NET 4.5 website.
I would like to create a separated Angular 2 project as it will be growing with time (and hopefully replace the asp.net)
For now I would like to create this project in Visual Studio (2015) and use some angular components or modules in the actual ASP.NET website.
Does the angular AppModule as to be in the ASP website?
I made some research but could not find answers or examples.
Am I gonna be able to do this relying on npm and system.js ? I saw that a lot of people are using gulp for copying file.
Is there a "right" way of doing this?
Any help would be highly appreciated
This question is not specific to Visual Studio, but yes, you can certainly accomplish this.
As you have suggested you can and should maintain the Angular application as a separate project.
The only additions that you need to make to your .aspx page are
including SystemJS and its configuration via script tags in that page or in its Master Page (You can also do this dynamically for CMS pages and using all sorts of other strategies). For example
<script src="loction-of-systemjs.js"></script>
<script src="loction-of-systemjs.config.js"></script>
Adding a markup tag with the selector corresponding to the app's root element, say 'my-embeddedable-widget', to your .aspx markup. For example
<my-embeddedable-widget>Loading...</my-embeddedable-widget>
Importing your application via SystemJS.import from a script tag embedded in the page containing the component selector above. For example
<script>
SystemJS.import('my-embeddedable-widget')
.catch (function(e) {
console.error(e);
}); // not using .bind or => here since aspx tends to imply older browser support
</script>
Note that this presupposes two things
that the 'my-embeddedable-widget' is set up in your SystemJS configuration. For example
SystemJS.config({
packages: {
'my-embeddedable-widget': {
main: 'main.ts' // just an example, could be main.js or anything really
}
}
});
If it is not you can add the config entry above as appropriate for your app (strongly recommended) or just import it directly from the path to the app's entry point such as e.g. my-embeddedable-widget/main.ts or my-embeddedable-widget/main.js.
That the entry point of your widget declares all of its platform level dependencies, such as zone.js and likely various polyfills. For example
my-embeddedable-widget/main.ts
import 'zone.js';
import 'core-js';
// ...
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
// ....
This means that SystemJS will automatically load them when your widget is requested. While you could bring them in via separate script tags as we do with the loader itself, making them explicit dependencies of our widget by using ES Modules improves maintainability and allows us to defer loading them until they are required. Furthermore it helps further decouple the widget from the .aspx page. However, if other JavaScript on the page requires these polyfills, you may need to adjust this approach (especially with respect to zone.js because it monkey patches window.Promise)
Hi am new to Samsung Smart TV App,
I want to create some rich user interface with CSS and Javascript. I think Twitter Bootstrap is a good choice for this. But i cannot use bootstrap's class properties in my application. Guide me how to use twitter bootstrap framework in Samsung Smart TV App.
I have successfully used bootstrap in one of the apps I created. Just add the bootstrap code to the project's directory and reference it from the index.html like you would with any style sheet.
Also make sure that you include the following at the top of all of the individual scene style sheets
#import url("<PATH TO BOOTSTRAP>/bootstrap.css");
I think you should use sf.core.loadCSS(); in your application. Just see guide. There is analogous method for JS including too.
If you're using AppsFramework 2.0 app structure (Basic App Project) you should place it in your app/init.js like this:
function onStart() {
sf.core.loadCSS([
"app/stylesheets/file1.css",
"app/stylesheets/file2.css"
], function () {
// callback on file loading
});
}
Callback function isn't mentioned in documentation, but it works (I'm sure for JS, CSS should work same way).
But if you're using "Javascript App Project" template (the old one), then you can place mentioned <style>#import url();</style> in your root index.html.