Support for other JSX factories - #6146

Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom
rwyborn:react-factory-option
Jan 7, 2016
Merged

Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom
rwyborn:react-factory-option

Conversation

@rwyborn

@rwybornRowan Wyborn (rwyborn) commented Dec 18, 2015

Copy link
Copy Markdown

PR for Issue #3788

Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.

--jsx react --jsxNamespace MyDOMLib

results in emits being MyDOMLib.createElement

I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing

-- jsx MyDOMLib

Rowan Wyborn added 2 commits December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas

Microsoft Contribution License Agreements (msftclas) commented Dec 18, 2015

Copy link
Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!

The agreement was validated by Microsoft and real humans are currently evaluating your PR.

TTYL, MSBOT;

@RyanCavanaugh

Ryan Cavanaugh (RyanCavanaugh) commented Dec 18, 2015

Copy link
Copy Markdown
Member

I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.

I'm thinking:

letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);

@RyanCavanaughRyan Cavanaugh (RyanCavanaugh) mentioned this pull request Dec 18, 2015
Closed
@DanielRosenwasser

Daniel Rosenwasser (DanielRosenwasser) commented Dec 18, 2015

Copy link
Copy Markdown
Member

If you have --jsx make, why exactly do you need --reactNamespace rt?

@unional

Homa Wong (unional) commented Dec 18, 2015

Copy link
Copy Markdown
Contributor

I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).

@rwyborn

Rowan Wyborn (rwyborn) commented Dec 18, 2015

Copy link
Copy Markdown
Author

Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits

  • MyDOMHandler.createElement
  • MyDOMHandler.__spread

Client code can then map those to whatever custom library implementation it wants.

@tinganho

Tingan Ho (tinganho) commented Dec 19, 2015

Copy link
Copy Markdown
Contributor

Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.

What about?

--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.

I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?

@unionalHoma Wong (unional) mentioned this pull request Jan 2, 2016
Closed
@RyanCavanaugh

Ryan Cavanaugh (RyanCavanaugh) commented Jan 6, 2016

Copy link
Copy Markdown
Member

Sorry for the delay.

Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following

  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)

The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).

Thanks!

@mhegazy

Mohamed Hegazy (mhegazy) commented Jan 7, 2016

Copy link
Copy Markdown
Contributor

Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.

@mhegazy
Mohamed Hegazy (mhegazy) merged commit 2395890 into microsoft:masterJan 7, 2016
@mhegazy

Mohamed Hegazy (mhegazy) commented Jan 7, 2016

Copy link
Copy Markdown
Contributor

merged manually after updating the name and adding tests.

@mhegazy

Mohamed Hegazy (mhegazy) commented Jan 7, 2016

Copy link
Copy Markdown
Contributor

thanks Rowan Wyborn (@rwyborn)!

@rwyborn

Rowan Wyborn (rwyborn) commented Jan 8, 2016

Copy link
Copy Markdown
Author

Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!

@mhegazyMohamed Hegazy (mhegazy) mentioned this pull request Jan 13, 2016
Closed
@unional

Homa Wong (unional) commented Nov 21, 2016

Copy link
Copy Markdown
Contributor

More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)

How is that doing?
It is this one? #6987

@mhegazy

Mohamed Hegazy (mhegazy) commented Nov 21, 2016

Copy link
Copy Markdown
Contributor

Homa Wong (@unional) looks like you are looking for #12135

@unional

Homa Wong (unional) commented Nov 21, 2016

Copy link
Copy Markdown
Contributor

Thank! I'll take a look at it.

It's been a while ago, I need to refresh what is my original needs. 🌷

@microsoftMicrosoft (microsoft) locked and limited conversation to collaborators Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Support for other JSX factories - #6146
Merged
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Jan 7, 2016
Merged
Support for other JSX factories#6146
Mohamed Hegazy (mhegazy) merged 3 commits into
microsoft:masterfrom 
rwyborn:react-factory-option
Conversation
@rwyborn
@rwybornRowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

PR for Issue #3788
Current implementation adds a new jsxNamespace compile option that can specify the JSX namespace (factory) when jsx mode is react.
--jsx react --jsxNamespace MyDOMLib
results in emits being MyDOMLib.createElement
I was thinking an alternative would be to just use the existing --jsx option where "preserve" and "react" are special reserved values. In this setup the above would be achieved by just doing
-- jsx MyDOMLib
Rowan Wyborn
added 2 commits
December 18, 2015 21:56
Rowan Wyborn
Initial check in - Support other JSX factories Issue#3788
b7f6070
- added jsxNamespace compile option
- when jsx mode is "react", jsxNamespace optionally specifies the emit namespace for React calls, eg "--jsxNamespace MyDOMLib" will emit calls as MyDOMLib.createElement (instead of React.createElement)
- symbol specified by jsxNamespace must be present, else compile error is generated (same handling as is done for React symbol when no jsxNamespace is specified)
Rowan Wyborn
Merge branch 'master' into react-factory-option
9d11f2b
@msftclas
Microsoft Contribution License Agreements (msftclas)
commented
Dec 18, 2015

Copy link


Copy Markdown

Hi Rowan Wyborn (@rwyborn), I'm your friendly neighborhood Microsoft Pull Request Bot (You can call me MSBOT). Thanks for your contribution!
You've already signed the contribution license agreement. Thanks!
The agreement was validated by Microsoft and real humans are currently evaluating your PR.
TTYL, MSBOT;
@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
I think we need to tweak the naming a bit here. This change is still very useful but doesn't directly address #3788 because it still requires that the library have the same shape (.createElement) as React.
I'm thinking:
letx=<Foo/>;
  • --jsx preserve
    • let x = <Foo />;
  • --jsx react
    • let x = React.createElement(Foo);
  • --jsx react --reactNamespace rt
    • let x = rt.createElement(Foo);
  • --jsx make
    • let x = make(Foo);
@RyanCavanaughRyan Cavanaugh (RyanCavanaugh)
mentioned this pull request
Dec 18, 2015

Closed

@DanielRosenwasser
Daniel Rosenwasser (DanielRosenwasser)
commented
Dec 18, 2015

Copy link


Copy Markdown

Member
If you have --jsx make, why exactly do you need --reactNamespace rt?
@unional
Homa Wong (unional)
commented
Dec 18, 2015

Copy link


Copy Markdown

Contributor
I would suggest to "pollute the global" with a meaningful namespace, such as JSX.make() or JSX.compose(). But simple make() might work too, just that it is a bit less convenience when I customize it in code (i.e. couldn't have a proper singleton such as JSX to hold states, when needed).
@rwyborn
Rowan Wyborn (rwyborn)
commented
Dec 18, 2015

Copy link


Copy Markdown

Author
Ryan Cavanaugh (@RyanCavanaugh) I had exactly the same thought originally re: your --jsx make example. The problem is this doesn't define what to do with the JSX spread handling, which emits a call to React.__spread. So my compromise was to let the namespace be configured instead, ie --jsxNamespace MyDOMHandler emits
  • MyDOMHandler.createElement
  • MyDOMHandler.__spread
Client code can then map those to whatever custom library implementation it wants.
@tinganho
Tingan Ho (tinganho)
commented
Dec 19, 2015

Copy link


Copy Markdown

Contributor
Namespace for me, means only MyDOMHandler and not with the method name MyDOMHandler.createElement. createElement is occupying the namespace of MyDOMHandler so itself is not a namespace IMO.
What about?
--react for preserving current behavior of --jsx react.
--jsxElementFactory [value] for defining the factory function for JSX.
I think the option --jsx was a little bit ambiguous. And since --jsx preserve doesn't make so much sense anymore when this got landed maybe deprecate --jsx option?
@unionalHoma Wong (unional)
mentioned this pull request
Jan 2, 2016
 Closed

@RyanCavanaugh
Ryan Cavanaugh (RyanCavanaugh)
commented
Jan 6, 2016

Copy link


Copy Markdown

Member
Sorry for the delay.
Discussed with Bill Ticehurst (@billti) and Mohamed Hegazy (@mhegazy) and we landed on the following
  • This PR is 👍 (see one comment below)
  • More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
The only change I'd like to see here (other than removal of merge conflicts 😉) is that jsxNamespace should be reactNamepsace since this is specific to React emit (and I don't want confusion with the real namespace JSX { which is not changing names).
Thanks!
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
Rowan Wyborn (@rwyborn) please change the option name to reactNamespace and refresh the PR, and we should be good to go.
@mhegazy
Mohamed Hegazy (mhegazy)
merged commit 2395890
into
microsoft:masterJan 7, 2016
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
merged manually after updating the name and adding tests.
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Jan 7, 2016

Copy link


Copy Markdown

Contributor
thanks Rowan Wyborn (@rwyborn)!
@rwyborn
Rowan Wyborn (rwyborn)
commented
Jan 8, 2016

Copy link


Copy Markdown

Author
Mohamed Hegazy (@mhegazy) I just got back from holiday, thanks for fixing this up!
@mhegazyMohamed Hegazy (mhegazy)
mentioned this pull request
Jan 13, 2016

Closed

@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
More complex changes to emit semantics will wait until Ron Buckton (@rbuckton) tree-transform-based emitter is checked in. At that point we can re-evaluate (e.g. we may end up with fully-pluggable JSX transforms)
How is that doing?

It is this one? #6987
@mhegazy
Mohamed Hegazy (mhegazy)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Homa Wong (@unional) looks like you are looking for #12135
@unional
Homa Wong (unional)
commented
Nov 21, 2016

Copy link


Copy Markdown

Contributor
Thank! I'll take a look at it.
It's been a while ago, I need to refresh what is my original needs. 🌷
@microsoftMicrosoft (microsoft)
locked and limited conversation to collaborators
Jun 19, 2018
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.


Reviewers


No reviews


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

7 participants

@rwyborn@msftclas@RyanCavanaugh@DanielRosenwasser@unional@tinganho@mhegazy