When trying to use custom directives with Vue3 and storybook, I get this error:
I don't understand the issue and have no idea where to even start to look. I'm still very new to Vue and storybook.
I created a small test directive just to make sure it wasn't something to do with a more complicated one:
app.directive('red-bg', {
beforeMount: (element, binding) => {
element.style.backgroundColor = "red";
}
});
and applied it:
<div class="wmr-select relative" ref="selectRef" v-red-bg>
It works in the normal app part of the the project (as you can see with the red bg):
But in story book I get the error in the first image.
I haven't been able to find any kind of answer for this.
Hoping someone will swoop in and save me.
Thanks.
Since Storybook is using another file to initialize your app, you need to define the directive in both file.
This is explained in the configuring storybook section of the doc.
In my case, I had defined the directive in my main.js file, but I also had to define it in the preview.js file, of the .storybook folder.
As a reference, here is was my .storybook/preview.js looks like:
import { app } from "#storybook/vue3";
/* all the other import needed for my project **/
import store from "#/store";
/** ... */
export const parameters = {
/** Some parameters specifics to the plugins of storybook. **/
/** For example, when using themes. **/
};
/** App specific initialization, ex defining locale */
const i18n = createI18n({
locale: "en",
fallbackLocale: "en",
messages: myLocaleMessageLoader()
});
/** registering directives */
app.directive("my-custom-directive", myCustomDirectiveHandler);
app
.use(i18n)
.use(store)
/** all the other `.use` that my app need.*/
Please note the usage of storybook own app in the import.
After adding the directive in the .storybook/preview.js I was successfully able to use it in my stories.
Related
How to globally set default regions for firebase cloud functions via angular fire so that they are deployed to specified region? Or it doesn't have to be with angular fire. I just don't want to call .region('') method with every function declaration.
I can't find anything in documentation about how to do it. But I've heard that it should be possible.
Previous versions of angular fire should support it.
I was blind. It is mentioned in angular fire documentation, under appropriate chapter name Functions Region
in app.module.ts
import { AngularFireFunctionsModule, REGION } from '#angular/fire/functions';
...
...
providers: [
{ provide: REGION, useValue: 'asia-northeast1' }
]
But that's not the right answer. I need them deployed to the correct region, and it didn't occurre to me that angular fire can't do that.
So if you don't want to set region at every function definition, you have to prefix(?) the definition with a global utility, so you do it only in one place.
in functions-utils.ts
import { region } from 'firebase-functions';
export class FunctionsUtils {
public static get builder() {
return region('desired-region-from-possible-options');
}
}
and then use it in function declaration:
in index.ts or whatever
import { FunctionsUtils } from './functions-utils';
export const yourFunction = FunctionsUtils.builder.https.onCall(...
List of available regions
I'm totally new with next.js and I need your help for something I guess really basic but I cannot find my mistake or an explanation, I found nothing on the internet about it, so here I am :
Everything works when I create a file in the pages folder(I mean every file in pages folder is ok except _app.js or _document.js), I can reach the URL, but I would like to use context, layout or authentification in the future and I need to use the _app and _document override cool things but I can write anything I want in it, it seems my _app.js or _document.js are just useless, never called or I don't know but they just never work.
I tried on 2 projects, here is what I do according to the next documentation :
first, npx create-next-app to create the project, and then add an _app.js for example in pages folder and add :
import React from 'react'
import App from 'next/app'
import Nav from '../components/nav'
class MyApp extends App {
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// static async getInitialProps(appContext) {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// }
render() {
const { Component, pageProps } = this.props
return (
<>
<Nav />
<Component {...pageProps} />
</>
);
}
}
export default MyApp
Anybody could tell me what I am doing wrong?
Well, if anybody is going through the same issue, I found what was going on, in fact, after creating for the first time _app.js, I have to restart my docker container, or restart my app with yarn next dev if I want to see the changes or they never appear. I am going to look for more explanations on how SSR and next.js more globaly exactly work to understand their behaviour on this point. Good luck all !
I need to add the Static HTML file in Kibana dashboard.where i can hold my HTML file in Kibana.
Note:Kibana version 5.6.3
I come across some kibana plugin like Kibana-html-plugin,kibana5-html-plugin , but it wont support for my kibana version 5.6.3.
i already change the package.json file but it wont help.
is there any otherway to do
import marked from 'marked';
import uiModules from 'ui/modules';
import 'angular-sanitize';
marked.setOptions({
gfm: true, // Github-flavored markdown
sanitize: true // Sanitize HTML tags
});
const module = uiModules.get('kibana/markdown_vis', ['kibana']);
module.controller('KbnMarkdownVisController', function ($scope, $sce) {
$scope.$watch('vis.params.markdown', function (html) {
if (!html) return;
$scope.html = $sce.trustAsHtml(html);
});
});
at last, I found the solution.
Paste the above code in kibana/src/core_plugins/markdown_vis/public/markdown_vis_controller.js
I've installed a Meteor phone authentication package mys:accounts-phone, which should add a phone.number subfield into users collection. I try to access this field as follows:
Meteor.user().phone.number
but typescript shows error
Property 'phone' does not exist on type 'User'.
On the other hand, I have custom props in users.profile, and can easily access them in this way.
Insecure is not yet removed. Autopublish is ON.
this happens sometime when our angular component is initialized but our meteor data is not reached from server.
try to use user injection in place of Meteor.user()
import {Component} from "#angular/core";
import { InjectUser } from 'angular2-meteor-accounts-ui';//<--**** import this****
#Component({
selector: "login-buttons",
template
})
#InjectUser('user') //<--*** add this***
export class LoginButtonsComponent {
user: Meteor.User; //<--*** add this ***
constructor(private router: Router) {}
}
now in user variable you will have all values of Meteor.User
if you want to print in html part use this
<div *ngIf="user">
{{user.phone.number}}
</div>
don't forget to install
meteor add accounts-password
meteor npm install --save angular2-meteor-accounts-ui
and in app.module.ts file
import { AccountsModule } from 'angular2-meteor-accounts-ui';
#NgModule({
imports: [
... other modules here
AccountsModule
],
hope this will work. if this not work let me know i will tell you one other solution
Got probable answer from Meteor docs.
It explains why username property appears. By default, Meteor publish only a number of fields considered to be public. To exposure any additional fields they must be published explicitly.
Not yet have time to test, but think it should work.
The other reason, with the same sympthoms, when publication code do not executed at server side. Try to put
Meteor.startup(() => {
// code to run on server at startup
Meteor.publish('userData', function() {
if(!this.userId) return null;
return Meteor.users.find(this.userId
//, {fields: {lastname: 1,}}
);
});
});
in a file within /server folder of your application.
Hopefully this is a slam-dunk for someone out there...my essential problem is this: I've built up a very nice set of react components which i can render in my asp.net 4.5 mvc 6 application using react.js, flux, gulp, and browserify.
as long as i have it structured so that the react components have all the data they need everything is perfect. My issue now is that I would like to have an MVC view include the react stuff, and inject run-time properties into the top-level component as it is created. Since I'm brpowserify-ing all of my react code into a bundle, i just include the one script tag in my view:
<script src="/js/modules/AuthContainer.jsx"></script>
But whereas I would normally use JSX syntax to instantiate my component with props like this:
...the view in ASP.NET never gets translated to pure JS, so that fails.
I've also tried:
ReactDOM.render
(
React.createElement(AuthContainer, { successPath: '/home' }),
document.getElementById('reactRoot')
);
...from inside a script block in my view but i get:
Uncaught ReferenceError: AuthContainer is not defined
But i'm sure i'm exposing 'AuthContainer' via the browserify-ed bundle, so i don't understand why it's unable to resolve that component.
I know there's a React.NET way to do this, but i can't get that server-side rendering to work with my components because I'm using jQuery to fetch data in componentDidMount and the server-side rendering is choking looking for $() jQuery stuff.
I'd love to get the server side rendering going but right now i just need it to do work, one way of the other. Can someone provide a simple code snippet or gist of how to instantiate a React component from inside a cshtml file with run-time props?
One easy solution is this, just put your server side properties with Javascript in a global:
index.cshtml
<script>
var __config__ = {
base: "#MyBackEdnVariable",
initialCount: "#Count",
user: {
id: #user.id,
name: #user.name,
}
};
</script>
<script src="/js/modules/AuthContainer.jsx"></script>
And with React use that global variable:
AuthContainer.js
class AuthContainer extends React.Component {
render() {
return (
<div>{this.props.user.name}</div>
);
}
}
AuthContainer.defaultProps = {
initialCount: __config__.initialCount,
user: __config__.user
};
For posterity:
ReactDOM.render
(
React.createElement
(
MyComponent,
{
prop1: #numericValue,
prop2: '#textValue',
}
),
document.getElementById('reactRoot')
);
the magic was the jsx-alternative syntax, which i was aware of couldn't get a handle on that day. This allows you to instantiate react using pure JS and therefor just embed inside a simple script tag in your cshtml.
hth.