I am new to svelte and SMUI. I browsed the official docs from https://sveltematerialui.com/ and came across some weird attribute declarations like "table$aria-label" and "input$autocomplete". I am not sure what they mean, expecially confused about the naming convention using dollar signs as well as where the prefixes of "table" and "input" come about.
Any explanation is helpful and thanks.
You can add props to lower components and elements with "$" props, like input$maxlength="15".
All events are forwarded. This includes DOM events, SMUI events, and custom events.
You can add event modifiers with the on:click$preventDefault$capture={handler} syntax.
You have to use "$" instead of "|" like in native Svelte. (The extra S inside the | stands for SMUI.)
Supported modifiers are: preventDefault, stopPropagation, passive, nonpassive, capture, and once
This is from the documentation
Related
I have a templating language on top of html,js,css. I want to be able to disable errors if it comes from lines of code that match a given regex.
For example, given this templated HTML, vscode will throw some errors suggesting invalid css syntax:
<!-- custom css -->
<style id="custom-css">
{{User.customCSS}}
</style>
If what I'm asking (suppressing errors with regex) is impossible, what are my options to hide these errors?
There are extensions that come for these templating languages, but beyond syntax highlighting, they do not accomplish anything else.
I also cannot disable the entire errors/language features because that's extremely helpful.
The edit below was made by jD3V in response to a comment made by the OP's author
The Core Issue that I Want a Solution for:
VS Code Language Features are not working, however, this behavior is totally expected — after all VS Code tries to interpret the code — that you the author — write in a given document. VS Code wants to provide hints and warnings, but it is impossible for VS Code to do so when an arbitrary syntax has been injected into a well defined syntax, consequently; It's impossible for VS Code to provide language features for a syntax it doesn't know how to read — but I had hoped, to somehow, get a limited version of language features???
The rule below...
// #file ".../.vscode/settings.json"
{
"css.validate": true
}
...causes an error when ever a foreign syntax is written into a CSS document.
This is not a Rule that is Defined by a Linter or Formatter
This rule is unique in the sense that it checks whether your CSS document is in compliance with the current CSS Specifications Snapshot (which currently is the 2021 snapshot).
The rule was likely inspired by encouraged into existence due to the W3 Consortium's implementation of the same tool, that can be used through the W3C website.
CORE W3 Validator (official)
I can't say for certain, but because the standard puts out an official validation tool (which I have never known another standard to do, but I am sure CSS isn't alone) its likely that the official tool some how defines the VS Code tool. Either way, the setting "css.validate": true/false is not going to use the CSS Languages grammar to decide if the CSS is valid, it will probably use another grammar the meets the requirements of the W3 Consortium.
I am going to continue to find out if there is anyway around having to deactivate the tool. It maybe that you need to define a custom file-type, or turn the rule of though.
It is important to note that the validator is a tool that checks, whether or not, a CSS document — any document w/ the extension .css — meets the guidelines set by the current "W3 CSS Specification (which AtToW, the 2021 Spec Snapshot is the current spec used)". That means that the tool cannot be configured, because it simply does, or does not, meet the spec's guidelines.
https://jigsaw.w3.org/css-validator/
Note from Author:
Okay so, I keep seeing this bounty, and I know the answer, but I am teaching myself the same general subject area that the answer below is part of, so I didn't want to answer it, but since no one else has, I know I can point you in the generally-correct direction.
I know that there are two ways of doing this. The first means is the harder way, but if you ever plan on using this language in a different editor than VS Code, it might be one to consider.
Create a 'TextMate Grammar', if you have access to MacOS, this is a much simpler endeavor, as 'TextMate' has the best support for writing the grammar-type that was invented for it, or at least IMO. If you plan on using your {{}} brackets in CSS, you can write a CSS grammar, and just add support for your {{DoubleCurlySyntax}}.
The other option you have is, what I consider, the best option for embedded languages, and it was designed to be able to implement a custom syntax like yours far more easily. This is what I have been learning, and I have had to teach myself everything up to this point, because no one seems to know the answers to the questions I ask about it. Fortunately, much of what I have learned has been documented in a tutorial that is now part of the Official VS Code Documentation. You can find it here.
This is a broad topic, and there is no quick snippet someone could show you for creating a syntax quickly. This question touches on some of the fundamentals that computer science is built on, such as the "Grammar".
Speak of grammars, if you want to go that route there is a new tool currently in beta, that has been made available to the public. It can, if anything else, be used as a way to understand and learn how to author, define & implement a "TextMate Syntax PList" and "TextMate List of Scopes", which, when combined, makes up a TextMate Grammar.
The Tool is here. And no I am not bamboozling you into getting hacked the don't have an SSL license for what ever dumb reason. The tool is legit though.
IRO Tool
Update
In response to #Tori's Comment.
In response to Tosi's comment I personally think anytime someone creates a Language for VS Code for the first time, they will have to jump the same hurdles you are, especially this one.
I probably already stated this at some point, but this is a broad subject, there are many different factors to consider when implementing your language.
Here are my thoughts about your comment
At some point you're going to have to snippet generate CSS for your syntax to work.
What many frameworks & custom syntaxes like your own do, is they create a custom file extension, and write there language with in that type of file, then they use a parser, and regex to replace the syntax with CSS. The replacement of the values is what makes the language useful because it acts as a pre-processor and offers the ability to write dynamic CSS or HTML. A trait that usually only true programming languages have. Because the custom-syntax has to be parsed out, and a language that can be read by the Runtime Environment (which is the browser for your use-case), we can easily use another file ext. than .css to help VS Code out. Using a custom file ext would let vscode know, hey this is not standard SS. Your grammar will tell VS Code that it is very close to CSS, with minor syntactic changes.
This is the same means that I think several templating engines (like Pug, Mustache or Handlebars) use.
I think at this point you might want to consider how you are going to generate the raw CSS from your custom CSS-syntax.
Using alternate file extensions is a very common solution for this problem. A good example is JSON w/ Comments or .jsonc.
This is a good place to make use of the editor.action.inspectTMScopes tool
Using the inspector tool, we can view what the tokens for a "JSON w/ Comments" file looks like (aka .jsonc).
I assume you have used the tool, if not you can access it via the command palette, by typing in the phrase "Developer: Inspect Editor Tokens and Scopes", and then select the command when you see it.
The default keybinding for the tool is CTRL + ALT + SHIFT + i
Open a JSONC or *.jsonc Document
Many of the Configuration files end with .json but are configured using "files.associations: { ... }" to use the JSONC grammar. For example I used the inspector tool in my current projects "./.vscode/setting.json" file.
When you open the document, make sure there is valid JSON in it, then create a comment (which should be valid as we are working in JSONC). Then use the tool to inspect the comment.
The TextMate Token Inspector Tool should show you something that looks like the image &/or snippet below
.________________________________________________________________________.
| ·Hello·World 12 chars |
|________________________________________________________________________|
| language jsonc |
| standard token type Comment |
| foreground #99999999 |
| background #11101E |
| contrast ratio 3.10 |
| _______________________________________________________________________|
| textmate scopes comment.line.double-slash.js |
| meta.structure.dictionary.value.json.comments |
| meta.structure.dictionary.json.comments |
| source.json.comments |
| foreground comment.line |
| { "foreground": "#99999999", "fontStyle": "" } |
|________________________________________________________________________|
This is a GREAT example, because it shows you how VS Code's support for JSON w/ Comments uses the JSON TextMate grammar, and the comments property is tacked on to it. The comments at the end of source.json.comments denotes that this is a JSON grammar with the JSONC syntax added to it.
Now it gets even cooler! Well, it gets cooler if your a nerd like me. :-)
The first property shown in the tool when viewing the comments is comment.line.double-slash.js. In-other-words, the tools output should be interpreted as...
The JSONC Grammar extends the Standard JSON Grammar, by adding support for the JS Comment property from the JS Grammar!!!!!!
To me, that is cool!
As a bonus, here is how I extend a language, and assign it to a custom file type:
As I mentioned, I teaching myself the same topic. My language is called L3, and is a templating engine for ANSI Escape Sequences and Control Codes. This is part of my extension-manifest (or package.json).
/** #file "package.json" (My Extension Manifest) */
"contributes": {
"languages": [
{
"id": "l3",
"aliases": [
"L3",
"L3"
],
"extensions": [
".l3",
".lll",
".l3Lang
]
}
],
"grammars": [
{
"language": "l3",
"scopeName": "source.html.l3",
"path": "./syntaxes/l3.tmLanguage"
}
]
},
The "extensions":[".l3"] property is defining my language to be used in ".l3" documents as the language, and grammar for that document
The way that JSONC accomplishes injecting syntax into another grammar to define its-self is through the the "injectTo" property that getts added to the grammar contribution in the package.json extention manifest.
See the guide here to read more about injecting grammars into grammars.
I'm trying to create a chat bot that will help users search up motorcycles.
I'm new to API.AI and have set up my entities and their synonyms, my intent and user expressions, as well as references to the entities (#engineSize, #make, #bikeType).
My problem is when I try to add a required action and prompt, and then try to save the intent, I get the following message:
"The following entities reference each other and form an infinite loop: [engineSize]."
Initially I thought I was using the references wrong in the user expressions. I deleted every reference except for one expression which uses all three entities.
I can't figure out what I'm doing wrong. Any help would be greatly appreciated, thanks! Pix below for further details.
EDIT: I fixed one of the issues of trying to pass a template expression as an example. However, I still get the same error message. I will replace and update my image links to include the edits.
Annotated User expressions
Required Actions
Interestingly enough, the answer to this post would have been difficult to find because the problem was in defining my entities.
In the entity definitions, I included an #ref to the entity itself. ie the bikeType entity contained #bikeType as one of its definitions.
This is not to be mistaken with the User Expressions. As long as the user expression is marked as a Template (the entire line is denoted with an '#' on the far left, as opposed to a large " ), there should be no issues.
Edited for clarity to get at root problem
In the provided user input examples you give the intent, you are supposed to provide general examples and then highlight any text belonging to an entity to map where entities appear in user's inquiries.
In your case, you have input the actual entity reference '#engineSize' as an example belonging to the engineSize entity, creating a self reference.
A proper provided user example would look like:
Also note though that if you are just using entities to store generic information like numbers, addresses, times, etc. it generally makes far more sense to use prebuilt system entities for those categories than create a custom entity, for example #sys.number-integer might be exactly what you need
It looks like you need to get a firmer understanding of entities, for which I would recommend the documentation:
https://docs.api.ai/docs/concept-entities
I've been working on a component and currently I'm trying to do different things based on the selector chosen for the component.
So basically if I have a component with this structure
myComponent/
dialog.xml
myComponent.jsp
altView.jsp
I know that if I have a Node with resourceType myComponent I can request the alt view via browser by requesting "path/to/component/content.altView.html" and everything is hunky dory.
Similarly I can do a cq include and do something like:
# with cq include
<cq:include path="my/path.altView" resourceType="myComponent"/>
# or with sling include
<sling:include path="my/path" resourceType="myComponent" replaceSelectors="altView"/>
However, when I'm handling the request, I've seen some interesting behavior when looking at the RequestPathInfo Object.
For example, if we look at all 3 of the above cases I might have something like this:
# http://path/to/component/content.altView.html
slingRequest.getRequestPathInfo().getSelectors(); // {altView}
slingRequest.getRequestPathInfo().getExtension(); // html
# <sling:include path="my/path" resourceType="myComponent" replaceSelectors="altView"/>
slingRequest.getRequestPathInfo().getSelectors(); // {altView}
slingRequest.getRequestPathInfo().getExtension(); // html
# <cq:include path="my/path.altView" resourceType="myComponent"/>
slingRequest.getRequestPathInfo().getSelectors(); // []
slingRequest.getRequestPathInfo().getExtension(); // altView
I understand why the cq:include returns different results (we're making a request to my/path.altView and .altView coincidentally serves as the extension in this case). I'm curious if there is a normalized why to pull "altView" (or the selected view) regardless of if it's been used as an extension or selector. Or if this is normal and I just need to check both the extensions and selectors individually.
i.e
selectors = get selectors();
if selectors
do stuff
else check extensions
do stuff
Again thank you very much for your insights, this community is awesome.
[EDIT]
In response to an answer, I thought I'd give a little more context to what I'm doing. Basically our component structure is set up so that each of our components has an associated Java Class that handles the business logic. (I.E. apps/myapp/components/myComponent will map to com.mypackage.components.MyComponent) That said, within my component's Class I need to handle the control flow differently depending on how the component was called (i.e. what selectors/extensions/etc). For example, if my component was called normally I'd do the base behavior, but if it was called with selector (for exmaple) "altView" I would need to handle the alternative view differently, and in this alternative view different data will be available, etc.
My question was along the basis that it seems that i can give the "path" attribute of a "cq:include" tag the selector I want to use:
<cq:include path="my/path.altView" resourceType="myComponent"/>
However, when I check my RequestPathInfo in my component class to decide workflow, "altView" is returned as the extension, not within the String[] selectors. Note, the above compiles fine, and it selectors the correct .jsp file for rendering, the RequestPathInfo object just stores the data in a different place.
I'm starting to guess that places the selector into the path attribute works because the selectors and extensions modifiers alter the behavior vary similarly. mycomponent.altView.html resolves to altView.jsp whereas if I was to do mycomponent.altView it would also attempt to resolve a mycomponent/altView.jsp just as it would do the same for mycomponent.xml to mycomponent/XML.jsp
It seems like you're kind of working around Sling resolution. The easiest way to do "different things based on selector" in a given component (let's say my/new/component) is to create different renderers.
For example, say I am requesting /content/app/page.html, and on that page was the component my/new/component. Or if I request /content/app/page.selector.html, I want a slightly different experience for my/new/component.
In the cq:component, I would create two JSPs: component.jsp and component.selector.jsp. Sling will automatically know, based on the selector in the request, which renderer to use. Obviously each renderer can produce a different experience.
The same is true for extension. In the example, component.jsp and component.selector.jsp are actually equivalent to component.HTML.jsp and component.selector.HTML.jsp. The HTML is just implied. However, you could do component.XML.jsp and component.selector.XML.jsp and Sling will again, pick the most relevant selector, based on the selector(s) and extension of the request.
Now, what if you don't want the selector to show up in the page request's URL (in my opinion you shouldn't)...
You can include your component using sling:include and add the selector, like you've done.
The caveat is that sling:include works a little differently than cq:include, so only use this when you need to. Instead, you could also use Sling mapping to hide the selector from the user. The majority of the time I would recommend this approach.
I'm not sure what you were trying to do with adding the selector to the "path" attribute. I don't think that would do anything. The "path" is defining the resource name (and the node name if the resource is not synthetic). Including the selector in that wouldn't do anything, except make the resource name include a period and the selector.
My question was along the basis that it seems that i can give the
"path" attribute of a "cq:include" tag the selector I want to use:
<cq:include path="my/path.altView" resourceType="myComponent"/> However, when I check my RequestPathInfo in my component class to
decide workflow, "altView" is returned as the extension, not within
the String[] selectors.
As opposed to the cq:include tag, you could alternatively use sling:include tag, which provides attributes to modify the selectors & suffix on the request:
<sling:include resourceType="myComponent" path="my/path" addSelectors="altView"/>
or
<sling:include resourceType="myComponent" path="my/path" replaceSelectors="altView"/>
If you already have selectors on the request that you don't want to apply to myComponent.
In terms of the differences between Sling include & CQ include, there seems to be very little, apart from the latter also supporting script inclusion. From the docs:
Should you use <cq:include> or <sling:include>?
When developing AEM components, Adobe recommends that you use
<cq:include>.
<cq:include> allows you to directly include script files
by their name when using the script attribute. This takes component
and resource type inheritance into account, and is often simpler than
strict adherence to Sling's script resolution using selectors and
extensions.
All,
I'm using QScintilla to syntax-highlight and autocomplete my domain specific language (DSL).
I wrote a custom lexer by re-implementing (QsciLexerCustom) and I'm trying to use the auto-completion.
My problem is that the auto-completion doesn't work like I want.
I'd like my custom lexer to work like the QsciLexerPython. That is, if i add 'toto.titi.tata' to the api, when i type 'toto.' in my qscintilla editor, it suggests me 'titi.tata'. As of now, it is suggesting me toto.titi.tata. :(
I tried to add 'autoCompletionWordSeparators' to my lexer but it is not working.
How can i make my custom lexer auto-complete work like the QsciLexerPython?
Thanks a lot !
Lexer = customlexer(self.text)
api = QsciAPIs(Lexer)
api.add('toto.titi.tata')
api.prepare()
Lexer.setAPIs(api)
self.text.setLexer(Lexer)
class lexer(QsciLexerCustom):
def __init__(self, parent):
QsciLexerCustom.__init__(self, parent)
def autoCompletionWordSeparators(self):
return ['.']
The current QScintilla APIs provide no way to do this.
The main obstacle is that many of the virtual methods you need to reimplement in a QsciLexerCustom subclass aren't public. This is why the code in your example doesn't work - your autoCompletionWordSeparators method is ignored when the lexer is set, and the base-class method from QsciLexer is called instead (which returns an empty list).
You might also think you could use QsciScintilla.setAutoCompletionWordSeparators to work around this, but alas, this only works if no lexer has been set!
The only way to solve this issue is to either implement auto-completion yourself (which is doable, but a lot of work), or make a feature request on the Qscintilla mailing list to get the necessary virtual methods added to the public API for QsciLexerCustom.
The methods in question are listed here (the names are shown in bold black, rather than as a link).
I see some posts on this same issue but would like further clarification as I cannot get any of these answer to work especially as I can't pick the answer out of the Jquery documentation.
I want to combine some classes for the convenience of cascading appropriate styling. I could simply replicate the styling in a single class but I am assuming that that would be bad practice.
<div class="left_Item drop_Down" id="col_1">some stuff</div>
$(".left_Item, .drop_Down#col_1").whatever....;
// matches every occurrence of class left_Item with the single occurrence of //drop_Down#col_1 ... this tallies with the multiple selector documentation.
$("#col_1").whatever....;
//obviously does match as the selector is only looking at the id.
//however
$(".drop_Down#col_1").whatever....;
//does not match Does this imply that the classes cannot be matched separately? So....
$(".left_Item.drop_Down#col_1").whatever....;
// various posts on so state that this should match it does not for me. Nor does
$(".left_Item .drop_Down#col_1").whatever....;
$(".left_Item").filter(".drop_Down#col_1).whatever....;
// various posts on so state that this should match also but it does not for me.
So firstly I assume that I am doing the correct thing using multiple classes. If not I'll stop trying to make this work!
Secondly please can some one give the correct jquery syntax to match an element with multiple classes.
Thx
The syntax is as follows (for CSS or jQuery):
.class1.class2
In your case:
$(".left_Item.drop_Down").whatever...
If you want to use an id as well as a class selector, then put the id first:
$("#col_1.left_Item.drop_Down")
Though since ids are supposed to be unique, I don't understand why you don't just use $("#col_1")
If the classes are your main focus then try this.
$('.left_Item.drop_Down').whatever...
But if you want an Id that has classes left_Item drop_Down you might do this
$('#col_1.left_Item.drop_Down').whatever...