I need to be able to reference items by username and slug. I currently have my state shape like this:
posts: {
user1_postslug: {...},
user2_postslug1: {...},
}
But I'm worried that this will eventually affect performance, so I thought about doing it like this instead:
posts: {
items: {
4: {...},
21: {...},
},
references: {
user1_postslug: 21,
user2_postslug1: 4,
}
}
Here I am storing them by their numbered id, and storing references to them. Is there any reason I shouldn't be using the above code, or the first?
The second example is probably closer to what you want, although you may want to tweak it a bit further. The new Structuring Reducers section in the Redux docs has a page on Normalizing State Shape, which should be relevant.
Don't see any actual concerns with performance here, though.
Related
I am wondering if it is possible to do a block transform that uses a createBlock function that can set a className on a block. I also wonder if a block transform that uses a createBlock function can target a block variation.
I am working on a WordPress shortcode block transform and have slowly figured out how to make it work (see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-transforms/#shortcode). The code so far will allow you to copy and paste into the WordPress editor (I think you have to use right click and paste match styles {let me know if that is also wrong}) and will create a group with 2 paragraphs inside it. The last thing I am trying to figure out is if I can apply a box shadow block style (that is already registered) to the group during the transform. Currently I am trying to do that with className and have tried style, styles, etc...) I have tried to look through source code and many documentation pages, but I am not finding if that is possible. I was trying to just do it with className and it doesn't appear to work.
const transforms = {
from: [
{
type: 'shortcode',
tag: ["shadow"],
priority: 1,
transform: ( attrs, shortcodeObj ) => {
return createBlock( 'core/group', { className: "is-style-box-shadow" }, [
createBlock( 'core/paragraph', { content: attrs.named.heading }),
createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
] );
}
}
],
};
And this is the shortcode to paste into the editor
[shadow heading="Heading Test"]
This content should be accessible in the transform
[/shadow]
Alternatively, another solution would be to transform to a block variation that already has the block style defined, but I am not finding if that is possible either. Any advice would be really helpful to trying to perfect copy and paste into WordPress.
I have a situation where I was to replace
#ViewChild(Foo, { static: true }) foo!: Foo;
with a version that gets several Foo in a list.
The expected solution is
#ViewChildren(Foo, { static: true }) foos!: QueryList<Foo>;
but #ViewChildren doesn’t support static.
Is there any work-around here?
The use-case is that I have something like this:
#ViewChild(Foo, { static: true }) foo!: Foo;
ngOnInit(): void {
onFooInit(this.foo);
}
ngAfterViewInit(): void {
afterViewFooInit(this.foo);
}
and I need it to become
#ViewChildren(Foo, { static: true }) foos!: QueryList<Foo>;
ngOnInit(): void {
this.foos.forEach(onFooInit);
}
ngAfterViewInit(): void {
this.foos.forEach(afterViewFooInit);
}
where onFooInit and afterViewFooInit are black-box library functions whose documentation says to call them in ngOnInit and ngAfterViewInit, respectively, noting that { static: true } is necessary to do so. (I have tested this, and yes, there are errors without { static: true }.)
I tried some hackery with #ViewChild(Foo, { static: true }) set foo(foo: Foo) { this.foos.push(foo); }, which unsurprisingly went nowhere, and I tried to create my own custom decorator that internally called ViewChild on each match of the selector, which I couldn’t get working. One thing I know I could do is just use ViewChild on each individual thing I want to include in the list, and then hard-code the actual list creation from those, but I want to re-use this code in several components which is going to get painful real fast.
Then I realized this should really be a directive, but the ElementRef in the directive has the same problems, being undefined in ngOnInit (I guess it isn’t static). The alternative to a directive is a wrapping component, but then I have to worry about all the inputs which is a huge pain. Probably better than the hard-coded polymorphic list, though.
I am open to suggestions on better ways to avoid this kind of initialization boilerplate on each of these components (that are very similar to one another, just with slightly different fields in each case).
I'm trying to use Flow, but I keep getting the "Not covered by Flow" warning, so my code is mostly underlined. I checked the Flow documentation, but it wasn't helpful regarding object property chaining, so how do you get something like this to work?
It appears that you are using a library that does not have type definitions.
With property lookups where the object is defined within the file, Flow has 100% code coverage without any types at all:
const foo = { bar: { baz: 2 } };
foo.bar.baz;
// 100% Flow coverage
Same goes for separate files:
1.js
// #flow
export default { bar: { baz: 2 } };
2.js
// #flow
import foo from './1.js'
foo.bar.baz;
// 100% code coverage
However, as soon as something is being imported from a file that Flow does not run on (either because it has flow turned off or because its a third-party library that does not use flow), Flow is not able to cover it.
1.js
// #noflow
export default { bar: { baz: 2 } };
2.js
// #flow
import foo from './1.js'
foo.bar.baz;
// 0% code coverage
In order to fix this, you need to give Flow information about the types.
You can do a couple of different things
Make a.js covered by Flow.
Add a a.js.flow file that declare's the types
If it's a third-party library add a flow-typed/a.js file that adds declarations.
But be sure to check flow-typed to see if a definition file already exists. (And contribute back!)
Hopefully this is helpful enough to give you at least a starting point
I'm new to Flow as well, but heres my take:
If you have two classes, A and B, and flow typechecking is not enabled on A, then B functions that call into it will be "uncovered".
// a.js
class A {
}
// b.js
/* #flow */
import A from './A'
class B {
buildA():void {
new A() // I'm un-covered by Flow!
}
}
Flow doesn't know anything about the structure of A, and so therefore can't provide any guarantees.
so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.
Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
insertElement: function(node, next) {
$(node).hide().insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", 1000)
},
removeElement: function(node) {
$(node).velocity({
opacity: 0,
},
{
duration: 100,
complete: function() {
$(this).remove();
}
});
}
}
});
if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(
Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.
But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.
This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:
insertElement: function(node, next) {
$(node).css("opacity", 0).insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", {duration:1000, display:null})
},
opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.
Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.
You could use:
onAfterAction
onBeforeAction
. The solution should be something like this:
animateContentOut = function() {
$('#content').css('display', 'none');
this.next();
}
fadeContentIn = function() {
$('#content').velocity('transition.fadeIn',1000);
}
Router.onBeforeAction(animateContentOut)
Router.onAfterAction(fadeContentIn)
I've read several posts on this but nothing that would really answer my question in an up-to-date way (i.e. UI.insert is depreciated).
So what's the best way of inserting/rendering a Template into a Surface reactively, meaning, not only one data object (renderWithData), but whatever is defined in the Template.helpers should also be updated reactively. Code tried so far:
var div = document.createElement('div');
//UI.insert(UI.render(function() { return Template.hello; }), div);
surface = new famous.core.Surface({
//content: Blaze.toHTML(function() { return Template.hello; }),
//content: div,
content: '<div class="hell"></div>',
size: [window.innerWidth, window.innerHeight],
properties: {...}
});
Blaze.render(function() { return Template.hello}, $('.hell')[0]);
These are 3 different approaches I've tried. First UI.insert inserts it, but handlebars-style Helpers are not recognized. Second, toHTML, no reactivity, even when I put everything into a Tracker.autorun(). Third, Blaze.render(...), doesn't work at all.
Is there an easy solution to this?
one possible answer is to use Famodev
var ReactiveTemplate = famodev.ReactiveTemplate;
var reactive = new ReactiveTemplate({
template: Template.mytemplate,
data: Collection.find().fetch(),
properties: {
}
});
Maybe it will be useful in some way http://github.com/dcsan/moflow