I am trying to migrate a sveltekit app from older versions to the latest. session has been removed from $app/stores.
I have not been able to find references to new session in the current documentation.
I use this reference in +layout.svelte
<script lang="ts">
import { session } from '$app/stores';
</script>
and also call GetSession from hooks.ts:
import type { GetSession, Handle } from '#sveltejs/kit';
What is the new way of referencing them?
Ben.
Related
Context
I've built an app that renders mails from your outlook accounts into a web page in react.
I'm trying to set a "viewed" boolean as a class property fed by redux store and change it from within the component (that change must impact in redux to manage that change on the overall app )
Problem
As you might see on below's code, i initiate the instance variable in the constructor with the given information from redux reducer,
I've tested with a bunch of console logs if the action creator successfully updates that information on the store and it actually does.
My problem is that my instance variable (this.viewed) isn't updating with redux's reducer information (that actually does update)
import React from "react"
import {connect} from "react-redux"
import { bindActionCreators} from "redux"
import * as QueueActions from "../redux/actions/actionCreators/queueActions"
class Mail extends React.Component {
constructor (props){
super(props)
this.id = props.id
this.viewed = props.mails.find(mail => mail.id = this.id).viewed
}
}
componentDidMount = () => {
this.props.queueActions.setMailToViewed(this.id);
}
function mapStateToprops () {
return {
mails : store.queueReducer.mails,
}
}
function mapDispatchToProps() {
return {
queueActions : bindActionCreators( QueueActions, dispatch ),
}
}
export default connect ( mapStateToprops, mapDispatchToProps ) (Mail)
Question
what am i doing wrong here?
why does the viewed property on redux updates but my instance variable that feeds from that very same information doesn't?
shouldn't this.viewed update whenever the props that provided the information update?
Can't i update this information from props without using a state?
I think the issue is because the assignment to this.viewed happens in the constructor, which is only called once. When the redux store updates, the component will get new props but the constructor will not be called again, so the value will not be updated. Hopefully these links will help explain the issue:
ReactJS: Why is passing the component initial state a prop an anti-pattern?
https://medium.com/#justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e
I'd also recommend reading up on functional components v class components and why functional components are used alot now instead of class ones. A starting point:
https://medium.com/#Zwenza/functional-vs-class-components-in-react-231e3fbd7108
If you used a functional component, you could use the useSelector hook to access the store and update your components.
Hope this this useful, I'm quite new to react so apologies if you're looking for something more, but I hope this helps.
Many of you might have heard of GraphQL. It provides QUERY and MUTATION. Also it supports SUBSCRIPTION as 100% replacement of web socket. I'm a big fan of GraphQL and hooks. Today I faced an issue with useSubscription which is a hook version of SUBSCRIPTION. When this subscription is fired, a React component is re-rendered. I'm not sure why it causes re-rendering.
import React from 'react'
import { useSubscription } from 'react-apollo'
const Dashboard = () => {
...
useSubscription(query, {
onSubscriptionData: data => {
...
}
})
render (
<>
Dashboard
</>
)
}
Actually useSubscription's API doc doesn't say anything about this re-rendering now. It would be really appreciated if you provide me a good solution to preventing the re-rendering.
Thanks!
Just put your subscription in separate component as this guy did, and return null, now your root component won't rerender
function Subscription () {
const onSubscriptionData = React.useCallback(
handleSubscription, // your handler function
[])
useSubscription(CHAT_MESSAGE_SUBSCRIPTION, {
shouldResubscribe: true,
onSubscriptionData
})
return null
}
// then use this component
<Subscription />
In my experience, there is no way to prevent re-render when receiving new data in onSubscriptionData. If your global data is used for calculations, you should use useMemo for you global variable. On the other hand, you should consider do you need put your variable in onSubscriptionData? Are there other ways? Did you use useSubscription in right component? If your have to do that, you have to accept extra rendering.
Hopefully, my answer is helpful for your situation.
<?php
namespace App\Http\Controllers\Auth;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Model\User;
use Illuminate\Support\Facades\Auth;
use Socialize;
use Redirect;
use Input;
use Mail;
use App\Mail\verifyEmail;
use Carbon\Carbon;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Facades\File;
class CustomAuthController extends Controller
{
// Register form
private function render() {
$renderer_source = File::get(base_path('node_modules/vue-server-renderer/basic.js'));
$app_source = File::get(public_path('js/entry-server.js'));
$v8 = new \V8Js();
ob_start();
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($renderer_source);
$v8->executeString($app_source);
return ob_get_clean();
}
public function get() {
$ssr = $this->render();
return view('app', ['ssr' => $ssr]);
}
}
I followed https://dzone.com/articles/server-side-rendering-with-laravel-amp-vuejs-25 and installed v8js.But error is $v8->executeString($app_source); make an error that "V8Js::compileString():9272: ReferenceError: window is not defined"
How to fix this bug.i have no idea
=================================================
Update I can run it.i change code in app.js by delete
/** after i delete it.i can run with server side rendering
require('./bootstrap');
require('./bulma-carousel.min')
window.Vue = require('vue');
can you tell me why ?*/
import App from './components/App.vue';
import VeeValidate from 'vee-validate';
import Vue from 'vue';
import router from './router'
Vue.use(VeeValidate);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('index-component', require('./components/index.vue'));
export function createApp() {
return new Vue({
render: h => h(App)
});
}
The problem is simple. The bootstrap file you are requesting is probably using window element in it somewhere. Also on this line window.Vue = require('vue'); you are using the window global object. Window as a global object is available in the browser, however javascript run on the server doesn't have the window object. Thus the error. This is the reason we need to make separate javascript files for server and the client. Try to consult with packages you implement on their support for server-side rendering.
Try disabling various imports one by one and find the ones which break your support for SSR and fix those or find alternatives.
How does one access the Ember.Handlebars.Utils.escapeExpression function using the new import syntax in Ember 2.16.x and above?
The following code snippet comes from the Writing Helpers section of the Ember docs. (FYI, there are a couple of unrelated errors in the original, which I have cleaned up in the code below.)
import { helper } from "#ember/component/helper";
import Handlebars from "handlebars";
import { htmlSafe } from "#ember/string";
export function makeBold(param /*, ...rest*/ ) {
let value = Handlebars.Utils.escapeExpression(param);
return htmlSafe(`<b>${value}</b>`);
}
export default helper(makeBold);
If I use the code above, I get the following error:
Could not find module 'handlebars' imported from 'ember-app/helpers/make-bold'
As of right now the Handlebars.Utils.escapeExpression function is not yet exported by the New Module Imports (aka. RFC 176). You should keep using it from the Ember import for now:
import Ember from 'ember';
Ember.Handlebars.Utils.escapeExpression(...)
An open GitHub issue for this exists at https://github.com/ember-cli/ember-rfc176-data/issues/12
The guides page that you linked appears to be mistaken and we need to fix that particular snippet. Sorry about that!
Is there any way to check if a class exists in Laravel 5?
I had this solution for Laravel 4: try to make a specific class, and if I get a ReflectionException, I use a generic class.
In Laravel 5 looks like I can't intercept the ReflectionException and I get a "Whoops".
I was wondering if there is some better way to do this.
try {
$widgetObject = \App::make($widget_class);
} catch (ReflectionException $e) {
$widgetObject = \App::make('WidgetController');
$widgetObject->widget($widget);
}
Check whether your class is set in bindings by doing
app()->bound($classname);
Why don't you just use the PHP function class_exists?
if(class_exists($widget_class)){
// class exists
}
\App::bound() might be the proper way.
Latest laravel versions (Maybe >= 5.3, I don't know exactly) register service providers in alittle different way by default.
For example, a new way of registering:
$this->app->singleton(MyNamespace\MyClass::class, function()
{
/* do smth */ }
);
instead of the old one:
$this->app->singleton('MyClassOrAnyConvenientName', function()
{
/* do smth */ }
);
As a result we should use App::make('\MyNamespace\MyClass') instead of App::make('MyClassOrAnyConvenientName') to resolve a service.
We maintain a library which has to support both versions. So we use \App::bound() to determine whether old or new format of service name is registered in container. class_exists() did actually work for newer laravel but didn't work as expected for older ones because in old systems we didn't have a properly named Facade for that service (Facade's name differed from registered service name) and class_exists() returned false.
Use the getProvider method on the Application container:
if (app()->getProvider($classname)) {
// Do what you want when it exists.
}
It's been available since 5.0 and can be viewed here.