I am using web components generated by svelte.
I have props defined in camel case (someType) and the expectation was that the following should work but doesn't
<my-web-c some-type="stringVal"></my-web-c>
Is this to be expected? Are there any options by which this can work?
I am aware that passing props as snake case and plain values does work like in JS (some_type)
<my-web-c some_type="stringVal"></my-web-c>
or in JS (sometype)
<my-web-c sometype="stringVal"></my-web-c>
But was curious about the camel case.
You can just use a camel case prop like this:
<my-web-c someType="stringVal"></my-web-c>
This REPL shows different props types in action. Kebab-case isn't currently supported. There is an issue open for it here.
Passing camel case prop just works only in svelte components. It doesn't work with custom elements.
You can use as below;
<my-web-c samplecomp = 'Sample Comp'></my-web-c>
<my-web-c sample_comp = 'Sample Comp'></my-web-c>
Related
For example if my HTML tag says <input v-model=“foo.bar”> I need the actual text foo.bar, rather than the object that foo.bar resolves to.
In Vue 2 my component was able to use this.$vnode.data.model.expression
What is the equivalent in Vue 3?
It's not documented, and kind of a hack, but I just solved it like this:
For v-model="foo.bar"
In vue2: node.$vnode.data.model.expression
In vue3: node.$attrs['onUpdate:modelValue'].toString() returns $event => ((_ctx.foo.bar) = $event), so you can get your foo.bar from there.
I just upgraded a tailwind project to Prettier v2.3 just for this feature, and for the life of me, I can't seem to find how to enable it in the documentation.
Found the blog post talking about it here. and the PR here
My guess is your tailwind project is using JSX/TSX which uses the attribute className instead of class. Implementing this feature for the className attribute is currently being discussed on the prettier GitHub repo.
PS: I had the desire personally to use multi line Tailwind in my project for a couple of months so I use a tiny utility function and put it in a file named tailwind.ts.
export default function tailwind(...args: string[]) {
return args.join(" ")
}
You can now do the following in any of your JSX or TSX files:
import tailwind from "your/file/path/tailwind.ts"
// some react function ...
<span
className={tailwind(
"font-semibold",
"underline",
"relative",
"group",
"cursor-pointer",
"text-black",
"dark:text-gray-300"
)}
>
// ... end of file
// Prettier will format this to the above if the line exceeds your line length
The advantage is that every line can now easily be commented out. The downside is that you have a lot of overhead (lot's of extra quotes and comma's + the import every time). Not sure if you like the approach, but for now it will probably have to do until Prettier implements it as well for className
I'm trying to get the first two divs of a given class from a web site using css selectors in selenium. I'll use SO to demonstrate the problem. If I try the selector in the console chrome dev tools it works:
$('div.question-summary:eq(0)')
[<div class="question-summary narrow tagged-interesting" id="question-summary-27442616">…</div>]
$('div.question-summary:eq(1)')
[<div class="question-summary narrow tagged-interesting" id="question-summary-27442177">…</div>]
But if I do the following with selenlium webdriver I get an error:
require 'selenium-webdriver'
driver = Selenium::WebDriver.for :chrome
driver.navigate.to('http://www.stackoverflow.com')
first_element = driver.find_element(:css, 'div.mainnav:eq(0)')
Selenium::WebDriver::Error::InvalidSelectorError: invalid selector: An invalid or illegal selector was specified
Is there another way to express this selector? Or a way to get selenium to respond to it?
Selenium uses the browser's native CSS selector engine. As a result, the find_element method will consider jQuery selectors, in this case the :eq(0), as being invalid.
If you want to use jQuery selectors, you will need to manually execute that script using the execute_script method. Note that when using this approach an array of Selenium::WebDriver::Element will be returned, which is why the .first is used (to get the first element of the Array).
first_element = driver.execute_script('return $("div.question-summary:eq(0)");').first
That said, if the only jQuery selector you are trying to use is :eq, you could get by with standard CSS selectors. The :eq selector returns a specific element within the matching set. You could do the same by using the find_elements and [] methods:
first_element = driver.find_elements(:css, 'div.question-summary')[0]
second_element = driver.find_elements(:css, 'div.question-summary')[1]
You can get a similar result with :nth-child:
first_element = driver.find_element(:css, 'div.question-summary:nth-child(0)')
Just be aware of the difference between :eq and :nth-child
I am trying to create a route for a page which can have param1 and param2. Param2 is optional part and the code will take a default value if the value is not present. The following is what I am trying to do
match '/school/:dept/:staff/show' => staff#show
match '/school/:staff/show' => staff#show
I have a bunch of statements like the above which seems to be too much of repetition. Is there a better way to do this. This link has an approach using a third party option. Considering it is an older post, looking to see if this is currently supported with rails.
As per: http://asciicasts.com/episodes/203-routing-in-rails-3
We can do this by defining a route like this, directing any matching route to our info#about action. Note that we can nest parentheses when creating optional parameters.
match "/:year(/:month(/:day))" => "info#about"
I want to create a single named argument/option for symfony command. And want symfony to distinguish those 3 options:
my:command, which means something like my:command --arg=null
my:command --arg, which means my:command --arg=defalutValue
my:command --arg=someValue, which is fully explicit.
I.e. I want two working modes for code under that command: default one and non-default with additional argument, and that arg should have default value.
I understand, that I could create 2 args, but I'm looking for one-arg-to-rule-them-all solution.
Is it possible to accomplish that with built-in classes or should I create custom ones? If solution is only available with custom classes, please tell me, where to start (i.e. "create subclass of ..." or "install a bundle named ..."), cause I'm not familiar with Symfony2's architecture.
It is possible:
->addOption('arg', 'a', InputOption::VALUE_NONE)
my:command => $input->getOption('arg') //false
my:command --arg => $input->getOption('arg') //true
my:command --arg=5 => $input->getOption('arg') //5
Answer by corvax is incorrect and doesn't work. As of today, you just cannot achieve this.
It is even stated in the Console documentation: Using Command Options.
See also these issues on GitHub:
#8135 [Console] Input options with InputOption::VALUE_OPTIONAL and InputOption::VALUE_NONE not working as expected
#11883 [Console] Added three state long option
#12769 [Console] Ability to use option default only if the option was passed
#12773 [Console] Add method to know parsed option
Symfony2 have console component which can be used separately. You can see documentation here. For more example you can check implementations of SensioGeneratorBundle.