Since the last Visual Studio Code update, I've got problems with IntelliSense autocompletion. Generally if I want to set a function as a prop (it's the most common use case of this problem) then instead of inserting just function name VS Code is adding ={} brackets. So how to get rid of this:
const func = () => {}
...
<button
onClick={func={}}
/>
and get something like this:
const func = () => {}
...
<button
onClick={func}
/>
To clarify - no new add-ons were installed. It's happening for js/ts files when writing in React.
How to fix this
Open VS code.
Go to File > Preference > Settings then
type: run code in the settings search bar
Select Edit in settings.json to open the settings.json file
Add the "javascript.preferences.jsxAttributeCompletionStyle": "none" line to your settings.json file
Why we do this:
In the defaultSettings.json file there is this code snippet:
// Preferred style for JSX attribute completions.
// - auto: Insert `={}` or `=""` after attribute names based on the prop type.
// - braces: Insert `={}` after attribute names.
// - none: Only insert attribute names.
"javascript.preferences.jsxAttributeCompletionStyle": "auto",
therefore, the default setting for jsxAttributeCompletionStyle is auto and by setting it to "none" in your settings.json file you overwrite that default setting.
As a workaround, we can set JSX Attribute Completion Style to none.
https://github.com/microsoft/vscode/issues/171609#issuecomment-1387107873
Related
I have html DOM like this:
<div class="alert alert-danger">
<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>
Your username or password was incorrect.
</div>
I would like to get Your username or password was incorrect. text.
If I do:
$('.global-alerts div.alert-danger').getText()
Then I get this ×.
Is there a way to get the only text part inside that div element?
I managed to do something like this:
getErrorMessageText() {
return browser.execute(function () {
const selector = '.global-alerts div.alert-danger';
// #ts-ignore
return $(selector).contents().not($(selector).children()).text().trim();
});
}
And it works.
But does anybody have better idea? Or more of like webdriverIO approach here?
Does it work if you use something like this?
var innerHTML = $('.global-alerts div.alert-danger').getHTML(false);
the false argument tells indicates whether or not to include the selector element tag in the output.
Serious solution
I do not quite see any other way but to use execute in order to "grab" that information from the page.
I would however place it in a browser command (either do it in the config "before" hook, or add a service that adds the command in the before hook)
This is what I ended up with considering typescript as main language, ignoring the use of jQuery, and considering that you use the before hook:
/**
* Gets executed before test execution begins. At this point you can access to all global
* variables like `browser`. It is the perfect place to define custom commands.
* #param {Array.<Object>} capabilities list of capabilities details
* #param {Array.<String>} specs List of spec file paths that are to be run
* #param {Object} browser instance of created browser/device session
*/
before: function (_capabilities: any, _specs: any, browser: WebdriverIO.Browser) {
browser.addCommand(
'getNodeText',
async function() {
return this.execute(
(selector: string) =>
Array.from( document.querySelector(selector).childNodes || [])
.filter((n: HTMLElement) => n.nodeType === n.TEXT_NODE)
.map(n => n.textContent)
.reduce(function(f, c) {return f+c;}, '')
.replace('\n', '')
.trim(),
this.selector
);
},
true
);
},
With this approach, typescript might complain about the function that passed to webdriver to get executed, so you can either write it properly, or just move it to a .js file and be done with it.
Just watch for document.querySelector(selector), in theory, it should not be null since the command is executed on an already found by webdriver element.
The way you grab the text there is just await (await $('.alert.alert-danger').getNodeText());
This should return the full string from within the node itself, but not any subchild.
Note: If you end up with an element like: <div id="mytxt">my text style is <strong>strong</strong> and <italic> italic </italic>. - html fan</div> and you do this getNodeText(), you probably end up with the value my text style is and . - html fan.
The "don't get bothered to much" solution
This approach will also sort of check that the "x" button is still there.
await expect($('.global-alerts div.alert-danger')).toHaveText('xYour username or password was incorrect.')
in latest version of WebDriverIO (v8), you can use this selector: aria/YourContent. For example:
With the DOM like this:
<h1>Hello World!</h1>
You can use this selector
console.log(await $('aria/Hello World!').getText()) // outputs: "Hello World!"
Ref: https://webdriver.io/docs/selectors/#fetch-by-content
Previously in Parcel v1 you could just use something like the #svgr/parcel-plugin-svgr plugin for Parcel. This would give you the ability to use SVGs inline like when using CRA:
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
Can anyone help figure out a way to do this in Parcel 2?
Parcel2 provides the #parcel/transformer-svg-react plugin to accomplish this.
Here's what you need to do:
Install it:
yarn add #parcel/transformer-svg-react --dev
Add a .parcelrc file at the root of your project that defines a named pipleine that uses this plugin:
{
"extends": "#parcel/config-default",
"transformers": {
"jsx:*.svg": ["...", "#parcel/transformer-svg-react"]
"jsx:*": ["..."]
}
}
(The "..." entry should actually be typed into the .parcelrc file - it tells parcel "process these kinds of assets as usual, and only after you are done, transform it into a react component.")
Update (5/2022) I added the "jsx:*": ["..."] line, which appears to currently be a necessary workaround to avoid this bug.
Another current "gotcha" is that if the SVG files that you want to transform into react components contain inline style tags (e.g. <path style="fill:red" ...>, you'll run into this bug. To avoid it, you'll want to remove the #parcel/transformer-svg plugin from your pipeline by modifiying the first transformer line to read "jsx:*.svg": ["#parcel/transformer-svg-react"] (i.e. remove the ...).
Use the named pipeline in your import statements:
import Star from 'jsx:./star.svg'
const App = () => (
<div>
<Star />
</div>
)
(optional, if you use TypeScript). Let TypeScript know about the jsx: named pipeline by using a wildcard module declaration. In a d.ts file that's a part of your typescript project, write this:
declare module "jsx:*.svg" {
import { ComponentType, SVGProps } from "react";
const SVGComponent: ComponentType<SVGProps<SVGSVGElement>>;
export default SVGComponent;
}
See parcel 2 documentation.
I have implemented react-select to allow entering tags based on auto-complete suggestions and/or inserting new ones.
My implementation is as follows:
import Select from 'react-select';
...
<Select.AsyncCreatable
className='add-tags'
clearable={!!selectionTags}
placeholder={'add more'}
name="form-field-name"
value={selectionTags}
onChange={setSelectionTags}
loadOptions={loadOptions}
promptTextCreator={(label)=>`add new tag: ${label}`}
inputProps={inputProps}
multi
/>
When selectionTags is the list of tags that have already been selected, setSelectionTags is a function that adds a new selected item to that list, and loadOptions holds the list of autocomplete suggestions.
Problem is that if I type "ta" and I have "tag1" as one of the available completions, then choosing it will empty the list of suggestions but leave the "add new tag: ta" entry displayed.
Any idea why it's not being removed as well?
Thanks!
Following this thread on React-Select github:
https://github.com/JedWatson/react-select/issues/1663
I ended up working round it by adding the following options:
ref={s => (selectRef = s)} // store a reference to the select instance
onChange={tags => {
selectRef.select.closeMenu(); // close the entire menu
selectRef.select.setState({
isFocused: false, // remove focus from new tag option
});
setSelectionTags(tags); // call the add tags method with the new set of tags
}}
I have been searching for a few days to figure out how to change the options for the swiper (v 7.x-1.4) module in Drupal-7. The documentation is clear-as-mud explaining how the module expects this hook to be used. I'm looking for a simple code example on how to implement the following options from the swiper API:
autoplay
prevButton
nextButton
autoplayDisableOnInteraction
The only documentation reference I have been able to find is from the README.txt in the module:
...
You can also add, change and remove, any of API options of the Swipers,
just you need to implement a hook:
hook_swiper_options_alter($node, $plugin_options) {}
This way the module will handle pass these options to the script that
instantiates the swiper Plugin.
...
I'm fairly new to Drupal, but I am trying to learn. I have attempted to create a simple custom module to implement these options. I have called my module myCustom, created the /drupal/sites/all/modules/myCustom directory with the following files:
myCustom.info:
name = myCustom
description = customize swiper
package = me
version = 0.02
core = 7.x
files[] = myCustom.module
myCustom.module:
<?php
function myCustom_swiper_options_alter($node, $plugin_options)
{
$plugin_options += (
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
autoplay: 2500,
autoplayDisableOnInteraction: true
);
return($node, $plugin_options);
}
I know I have multiple problems. Drupal refuses to enable my module as-is and I can not figure out why. I have checked the admin->reports->recent log messages report and found nothing relevant to at least help me troubleshoot.
Any ideas how I can fix this? Does anyone have a working example of code that I can copy and modify to get this hook working?
Thank you in advance for any assistance!
You may want to read through this documentation: Writing module .info files (Drupal 7.x).
Remove this line from your .info file: files[] = myCustom.module. Drupal will automatically read through the .module file.
As you defined a version in your .info file this may need your attention: Release naming conventions, but actually you can just leave that out as well, it's not mandatory.
Since you're using a hook from that swiper module, I recommend to set it as a dependency in your custom module's .info file as: dependencies[] = swiper to prevent unmet dependency errors.
Change the $plugin_options array to a php array & do not return anything:
<?php
function YOUR_MODULE_swiper_options_alter($node, &$plugin_options) {
$plugin_options += array(
'nextButton' => '.swiper-button-next',
'prevButton' => '.swiper-button-prev',
'paginationClickable' => true,
'autoplay' => 2500,
'autoplayDisableOnInteraction' => true,
);
}
Additionally: Try to refrain from using capitals in module names as per machine name (module dir name). If you take a look at other Drupal modules in /modules or sites/all/modules they're all lowercased. (You can leave the name in your .info file which also represents your module in the modules list as you have now.)
I'm building a module using hook_preprocess_node()
I've made a new view mode for the node entity called ´vacancy_teaser´ using the hook_entity_info_alter()
this shows up in my node display settings and view
so I want to use the template included in my module when this view mode is used.
my code:
/**
* Implements hook_preprocess_node().
*/
function vacancies_preprocess_node(&$vars) {
if($vars['view_mode'] == 'vacancy_teaser') {
$vars['theme_hook_suggestions'][] = 'node_vacancy_teaser';
}
}
my template file is called: ´node-vacancy-teaser.tpl.php´ but is not used in the output of my view
$vars['view_mode'] == 'vacancy_teaser' in the view. ( tested )
but where does $vars['theme_hook_suggestions'][] = 'node_vacancy_teaser'; looks for the template file? somehow it's not included / used.
apparently in drupal 7 useing dubble underscores is required for some reason.
node_vacatures_vacancy_teaser.tpl.php placed in the active template folder seems to do the trick... although I don't think this is a neat solution since the tpl.php file is separated from the module.
Be sure to specify the template file in the hook_theme implementation. The examples project is great for finding out the details of how to do things like this. Specifically, check out the theming_example_theme() function in the theming_example module…
function theming_example_theme() {
return array(
// …
'theming_example_text_form' => array(
'render element' => 'form',
// In this one the rendering will be done by a tpl.php file instead of
// being rendered by a function, so we specify a template.
'template' => 'theming-example-text-form',
),
);
}
Instead of appending to the end of the $vars['theme_hook_suggestions'] array, try:
array_unshift($vars['theme_hook_suggestions'], 'node_vacancy_teaser');
This will pass your suggestion to the front of the array, and it will be found first. Most likely since you are appending it to the end of the array, Drupal is finding an existing theme suggestion first and using it instead (such as node.tpl.php).