How can I setup tailwind css vscode extension with Dioxus? - rust

I'm currently using Dioxus (Rust) for frontend WASM.
I'm looking to set up Tailwind CSS IntelliSense (Tailwind is working through the CLI), but I can't seem to get it working.
// settings.json
"tailwindCSS.experimental.classRegex": ["class:s*\"([^\"]*)"],
"tailwindCSS.includeLanguages": {
"rust": "html"
}
Here's an example component:
use dioxus::{core::UiEvent, events::MouseData, prelude::*};
use std::cmp::{max, min};
#[derive(PartialEq, Props)]
pub struct NavbarProps<'a> {
page_state: &'a UseState<i32>,
}
pub fn Navbar<'a>(cx: Scope<'a, NavbarProps<'a>>) -> Element<'a> {
let go_next = move |_: UiEvent<MouseData>| cx.props.page_state.modify(|val| min(val + 1, 17));
let go_prev = move |_: UiEvent<MouseData>| cx.props.page_state.modify(|val| max(val - 1, 1));
cx.render(rsx! (
div {
button {
class: "p-1 bg-red-300 ",
onclick: go_prev,
"<",
}
button {
class: "p-1 bg-red-700",
onclick: go_next,
">"
}
}
))
}
Any ideas?

This configuration worked for me with Dioxus:
"tailwindCSS.experimental.classRegex": [
"class: \"(.*)\""
],
"tailwindCSS.includeLanguages": {
"rust": "html"
},

Related

Why can I only have a single Texture binding in my wgpu bind group?

I currently have a BindGroup and BindGroupLayout which looks like this:
let bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
label: None,
entries: &[wgpu::BindGroupLayoutEntry {
binding: 0,
visibility: wgpu::ShaderStages::FRAGMENT,
ty: wgpu::BindingType::Texture {
sample_type: wgpu::TextureSampleType::Float { filterable: true },
view_dimension: wgpu::TextureViewDimension::D2,
multisampled: false,
},
count: None,
}],
});
let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
label: None,
entries: &[wgpu::BindGroupEntry {
binding: 0,
resource: wgpu::BindingResource::TextureView(&target),
}],
layout: &bind_group_layout,
});
and works as desired.
For context: I use these in a render pass to do post-processing.
Now I also needed a Sampler in my shader. First I created the Sampler
let linear_sampler = device.create_sampler(&wgpu::SamplerDescriptor {
mag_filter: wgpu::FilterMode::Nearest,
min_filter: wgpu::FilterMode::Nearest,
mipmap_filter: wgpu::FilterMode::Nearest,
..Default::default()
});
and added it to the layout and bind group like so:
let bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
label: None,
entries: &[
wgpu::BindGroupLayoutEntry {
binding: 0,
visibility: wgpu::ShaderStages::FRAGMENT,
ty: wgpu::BindingType::Texture {
sample_type: wgpu::TextureSampleType::Float { filterable: true },
view_dimension: wgpu::TextureViewDimension::D2,
multisampled: false,
},
count: None,
},
wgpu::BindGroupLayoutEntry {
binding: 1,
visibility: wgpu::ShaderStages::FRAGMENT,
ty: wgpu::BindingType::Sampler(wgpu::SamplerBindingType::NonFiltering),
count: None,
},
],
});
let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
label: None,
entries: &[
wgpu::BindGroupEntry {
binding: 0,
resource: wgpu::BindingResource::TextureView(&target),
},
wgpu::BindGroupEntry {
binding: 1,
resource: wgpu::BindingResource::Sampler(&linear_sampler),
},
],
layout: &bind_group_layout,
});
However when I now run my code a get a ValidationError saying that:
thread 'main' panicked at 'wgpu error: Validation Error
Caused by:
In a RenderPass
note: encoder = `<CommandBuffer-(0, 2, Metal)>`
In a draw command, indexed:false indirect:false
note: render pipeline = `<RenderPipeline-(1, 1, Metal)>`
the pipeline layout, associated with the current render pipeline, contains a bind group layout at index 0 which is incompatible with the bind group layout associated with the bind group at 0
I noticed the same behaviour on Metal and DirectX 12. I also noticed that I get the same error when I only add one sampler or when I add two Texture Bindings as shown below:
let bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
label: None,
entries: &[
wgpu::BindGroupLayoutEntry {
binding: 0,
visibility: wgpu::ShaderStages::FRAGMENT,
ty: wgpu::BindingType::Texture {
sample_type: wgpu::TextureSampleType::Float { filterable: true },
view_dimension: wgpu::TextureViewDimension::D2,
multisampled: false,
},
count: None,
},
wgpu::BindGroupLayoutEntry {
binding: 1,
visibility: wgpu::ShaderStages::FRAGMENT,
ty: wgpu::BindingType::Texture {
sample_type: wgpu::TextureSampleType::Float { filterable: true },
view_dimension: wgpu::TextureViewDimension::D2,
multisampled: false,
},
count: None,
},
],
});
let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
label: None,
entries: &[
wgpu::BindGroupEntry {
binding: 0,
resource: wgpu::BindingResource::TextureView(&target),
},
wgpu::BindGroupEntry {
binding: 1,
resource: wgpu::BindingResource::TextureView(&target),
},
],
layout: &bind_group_layout,
});
So the only configuration I found to be working is when the bind group and layout contain exactly one texture binding.
Does anybody have an idea why this is the case here?
The full code can be found here. The failing code is in src/fxaa/ and can be tested using cargo run --example triangle, the original working code is in src/grayscale/ and can be run using cargo run --example text. I ommited the shaders for brevity and because their contents does not seem to matter, but they can also be found in the repo linked above.
Because in fn resize(&mut self, device: &wgpu::Device, size: &wgpu::Extent3d), you have created a new bind_group that is incompatible with already binded bind_group_layout.
If you recreate a new bind_group_layout, you also need to recreate a new pipeline and pipeline_layout.

Update data from one Map to another

How can I do the following.
Suppose I have the following document created
{
"_id": "12345",
"email": "julio#gmail.com",
"password": "julio123",
"created": "2021-08-17",
"status": "0"
}
and now through the created document I wish to have a new document like the following one.
{
"email": "julio#gmail.com",
"password": "julio123",
"status": "1"
}
I don't know if what I did is correct, but I know that more code is missing.
#[cfg(test)]
mod tests {
use serde_json::{Map, json};
#[test]
fn prueba() {
let mut user = Map::new();
user.insert("id".to_string(), json!("12345"));
user.insert("email".to_string(), json!("juan#gmail.com"));
user.insert("password".to_string(), json!("juan123"));
user.insert("created".to_string(), json!("2021-08-17"));
user.insert("status".to_string(), json!("0"));
println!("user: {:#?}", user);
let user2 = user.into_iter().fold(Map::new(), |mut user_map, (key, val)| {
user_map.insert(key.clone(), val.clone());
user_map
});
println!("user2: {:#?}", user2);
}
}
I'm just learning to use functional programming, I need help to get the best possible result.
What you seem to want to achieve is to filter and update some fields, creating a new object as a result.
Here is how you might do that:
let user2 = user
.into_iter()
.filter_map(|(k, v)| match k.as_str() {
"email" => Some((k, v)),
"password" => Some((k, v)),
"status" => Some((k, json!("1"))),
_ => None,
})
.collect::<Map<_, _>>();

Angular-Kendo treeview focus() method

Trying to focus() on a treeview node in this plunker using an ElementRef. I commented the two lines at the bottom cause they don't work.
Here's the plunker for the code listing below:
https://plnkr.co/edit/aUnechu6glXk5CMFsMex?p=preview
import { Component, ElementRef, ViewChild } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<kendo-treeview
#treeview
[nodes]="data"
textField="text"
kendoTreeViewCheckable
kendoTreeViewExpandable
kendoTreeViewSelectable
kendoTreeViewHierarchyBinding
childrenField="items">
</kendo-treeview>
`
})
export export class AppComponent {
#ViewChild("treeview") treeview: ElementRef;
public data: any[] = [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
];
//let tree = this.treeview.nativeElement;
//this.treeview.focus('0');
}
And the focus() method as per their docs and sample here:
https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-focus
How can I focus() programmatically within my component code, as opposed to the click() event posted in their docs ?
The code needs to be executed inside one of Angular's lifecycle hooks or from a method. We need either a ngAfterViewInit or a custom AppComponent.focus() method that ViewChild has time to instantiate the TreeView instance:
ngAfterViewInit(){
//XXX: this.treeview is the TreeViewComponent instance set by ViewChild decorator
this.treeview.focus('1');
}

Xkb three key shortcut to acyclic switch keyboart layout like in Windows

The MS Windows introduced ability to switch current keyboard layout by press specific hotkey for each specific language.
I found very comfortable to have acyclic shortcuts to switch layout to target language with following shortcuts: Alt+Shift+1, Alt+Shift+2, Alt+Shift+3.
When i moved to Linux i run into problem with configure same shortcuts.
I tried to create custom ~/.config/xkb/my file with following content:
xkb_keymap {
xkb_keycodes { include "evdev+aliases(qwerty)" };
xkb_types { include "complete" };
xkb_compat {
include "complete"
interpret ISO_Second_Group {
action= LockGroup(group=2);
};
interpret ISO_Third_Group {
action= LockGroup(group=3);
};
};
xkb_symbols {
include "pc+us:1+ru:2:ua:3+inet(evdev)+group(ctrl_shift_toggle)"
key <AE01> { [ ISO_First_Group ] };
key <AE02> { [ ISO_Second_Group ] };
key <AE03> { [ ISO_Third_Group ] };
};
xkb_geometry { include "pc(pc104)" };
};
to future load via:
$xkbcomp ~/.config/xkb/my $DISPLAY
Howto properly define ALT and SHIFT modifiers?

JointJS: Add a label on the validateConnection Event?

I have a validateConnection event within which I have a lot of conditions. Now on one of these conditions, I want to add a custom label to the link that gets created. How do I do this within validateConnection
You can try this:
prepare a 'placeholder' for the future label - it creates a label without text:
new joint.dia.Link({
labels: [
{ position: 0.5 }
]
}),
Then in the validateConnection set the label text value throught the attr
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
if (cellViewT) {
linkView.model.prop('labels/0/attrs/text/text', cellViewT.model.attr('text/text'));
} else {
linkView.model.prop('labels/0/attrs/text/text', '')
}
}
https://jsfiddle.net/vtalas/hxbfo0m4/
joint.dia.Link({
labels: [
{ position: 0.5, attrs: { text: { text: 'test' } } }
]

Resources