Develop Reference

How can I use the ?? operator in VueJs templates?

I am trying to build a component to handle the editing of a substructure of my data. This piece of data is an object but in the main object, it is optional. So when invoking component I am trying to use the ?? operator to pass in an empty object to avoid access of undef issue. I would also like to be able to use the ?. operator for the same reason. Like so.
<template>
<my-sub-component :value="value.scf_rule??{}" />
</template>
However, Vuejs doesn't really like the question marks in the HTML attributes on my template. I get the following error:
Syntax Error: SyntaxError: Unexpected token (1:93)
This should be a really simple lookup on the web but I have been looking for quite a while and it's not easy. It doesn't help that searching for question marks isn't really possible.
I've tried escaping it with a backslash, that doesn't seem to work. Anyone know how I can have an expression in my attribute that uses the question mark operator? I suppose I could define my own nvl utility function but that seems a tad silly.

If you remove any kind of build stack from the equation, you can use whatever your platform supports. Your browser then will run the code just as you author it.
Otherwise you are limited to what the acorn parser version used by your webpack/bundler supports (usually everything finalized in the spec and proposals that have reached stage 4). With Vue, you're probably using webpack.
If you are fine with your code being transpiled to older JS versions, use Babel along with the necessary plugins 1 2.

How does Vue implement the double curlys/mustache syntax?

How does a frameworks like Vue implement their own custom syntaxes within an HTML document?
So I want to create a template engine, consequently I need to know how to implement my own custom syntax. I thought that an easy one would be the double curlys that can be used in Vue. Example of curlys:
<h1>{{pageTitle}}</h1>
My first thought was to use `String.prototype.replaceAll(regex, string); but I got stuck at the regex I would use. In fact thinking about it now, I probably need a dynamic regular expression maybe?
p.replaceAll(/\{\{()\}\}/g, '<p>{{embeddedVar}}</p>')
The other option I considered was a parser, or a lexer, but I didn't even know where to start. I built them in school in C++. I thought maybe NPM has one pre-built?
It seems like several developers have wrote their own custom template engine that has built-in support for the double curly brackets. I was thinking that maybe there is a common way that its being implemented.

The Vue syntax is indeed not understood by the browser. the work is done by the Vue library that's imported in every Vue app.
The original markup (with the curly braces showing up) can even be seen for a split second when the page is loading, and this is because Vue hasn't loaded up all the way yet.

How to rename React components _and_ have the 'imports' refactored too?

When renaming a React component, how do you ensure the new name is used everywhere?
E.g. OldComponent -> NewComponent
The IDE I'm currently using (IntelliJ IDEA) only part does the job. For example, it will leave the variables with the old name in import statements:
import OldComponent from 'components/NewComponent.jsx'
...
<OldComponent />
Do people generally avoid refactoring in JS, or are there solutions/tools that can do this? (Or do people just kinda get used to manually refactoring? :D)

I think that Shift + F6 should do the job. It does the renaming for all matching cases. You could also find this in context menu -> Refactor -> Rename...

For me personally, the solution was to use TypeScript.
IntelliJ will automatically update the imports for you (if you use TypeScript).

I need help understanding JavaScript "strict mode"

I'm writing a lot more JavaScript these days than I used to. I'm writing a bunch of JavaScript libraries for our product. Wanting to be as careful as possible I'm doing full jsdoc comments, etc. I also have 'use strict'; in all of my libraries and functions.
We're using jQuery and Kendo UI (no comments about whether these are good, bad, or indifferent, that ship has sailed). Both of these libraries have globals that they create, at the least "$" and "kendo" for each respectively. I'm using Visual Studio with Resharper so I get lots of help writing the JavaScript.
Now, here's my confusion. In my libraries, which are in files like LibraryName.js, I have to use both jQuery functions and kendo functions, so I'm doing things like $.ready(...) and kendo.keys.SPACEBAR. Visual studio gives me grief over "kendo" not being defined in strict mode, and it gives me grief about $.ready not being defined, but it doesn't give me grief over $ not being defined? Why is it special?
I know, this is a small thing, but I really want to understand what strict mode means and what the limitations are.
Thanks for reading!
Addition: Apparently I'm not being clear, so I'll try to expand. In strict mode, "...you can not, for example, use undeclared variables." Well, I don't see how one library file (say, mySuperLibrary.js) can use global values from another library file (jQuery or Kendo UI) without using "undeclared variables" as $ is a variable containing a function and kendo is as well. Neither of these are declared in my script, obviously.
What then confuses me is that Resharper complains that for $.ready, it flags "ready" as being undeclared but doesn't say $ is undeclared. It also flags kendo as being undeclared. The warning it gives me is "Using a variable (property or object) without declaring it is not allowed in 'strict mode'".
Now, my library works fine. It goes ahead and uses these "undeclared variables" to solve the problems it needs to solve. By the time my library loads these variables are declared.
In any other language I would somehow document in the file what external globals I require to be defined. I don't see any way to do that in JavaScript. There isn't any kind of "import" or "external requirements". I guess I'm wondering if I'm just missing something. There is no way to stop it from bugging me (so maybe the problem is my ocd, not wanting my libraries to have "fake" errors).

"Can't find variable" error with Rails 3.1 and Coffeescript

I have views in my application that reference my application.js file which contains functions I use throughout my application.
I just installed the Rails 3.1 release candidate after having used the edge version of 3.1. Until I installed the RC I wasn't having any problems but now I'm getting this error:
ReferenceError: Can't find variable: indicator_tag
indicator_tag is a function I defined in application.js.
The only difference I notice in the javascript file is that now all my functions are wrapped in:
(function() { ... }).call(this);
I understand this is for variable scoping? But could it be preventing my pages from using those variables? And before anyone asks, I've made sure the javascript paths are correct in my include tags.

By default, every CoffeeScript file is compiled down into a closure. You cannot interact with functions from a different file, unless you export them to a global variable. I'd recommend doing something like this:
On top of every coffeescript file, add a line like
window.Application ||= {}
This will ensure that there's a global named Application present at all times.
Now, for every function that you'll have the need to call from another file, define them as
Application.indicator_tag = (el) ->
...
and call them using
Application.indicator_tag(params)

Dogbert's solution is a great way to go if you have a very sophisticated JS back-end. However, there's a much simpler solution if you only have a handful of functions you're working with. Just add them directly to the window object, like this:
window.indicator_tag = (el) ->
...
Then you can use your functions from anywhere without having to wrap them up in another object.