[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga
, '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

[6.x] Vue 3 - #11339

Merged
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade
Feb 4, 2025
Merged

[6.x] Vue 3#11339
jasonvarga merged 146 commits into
masterfrom
vue-3-upgrade

Conversation

@jasonvarga

@jasonvargajasonvarga commented Jan 9, 2025

Copy link
Copy Markdown
Member

This upgrades Vue 2 to Vue 3.

This takes over from the awesome progress of #10430.

This PR does the bulk of the upgrade to get things running smoothly enough on Vue 3. There may be minor things broken here or there that may get fixed or replaced entirely in future PRs.

There may also be additional breaking changes introduced related to Vue 3 later. This PR does not necessarily represent the final state of Vue in Statamic 6.

Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works
- Add emits because you have to now
- Render function returns first element otherwise this.$el would be a text node.
- Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later)
- Bring back registration of fieldtypes
- Bard fieldtypes are commented out since they are quite broken at the moment.
- Remove StatusFieldtype as its not used anymore.
…ypes are ...
For a little bit of consistency.
Scrapped the polyfill, it's so widely supported.
Scrapped the underscore mixins, we don't use them.
Scrapped file_icon and resource_url, we don't use them.
Now users can do
import { Fieldtype } from '../../vendor/statamic/cms/resources/js/exports.js'
export default {
mixins: [Fieldtype]
}
OR
If they add resolve.alias.statamic to their vite.config.js they can simplify it further:
resolve: {
alias: {
statamic: path.resolve(__dirname, './vendor/statamic/cms/resources/js/exports.js'),
},
}
import { Fieldtype } from 'statamic';
- Support the new tree package we're now using
- Avoid using multiple trees
- The "top level" is just the first root item of the tree now, and styled in a way that the indent is removed.
@jasonvarga
jasonvarga marked this pull request as ready for review February 4, 2025 15:24
@jasonvarga
jasonvarga merged commit 953810f into masterFeb 4, 2025
@jasonvarga
jasonvarga deleted the vue-3-upgrade branch February 26, 2025 20:37
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga