From a18bb6b6f8e33fd1a5eae88b3fa1fa459b9689b5 Mon Sep 17 00:00:00 2001 From: Andrew Kirwin Date: Fri, 15 Dec 2023 16:01:28 +0000 Subject: [PATCH] convert to gjs --- .vscode/settings.json | 7 +- addon/components/wrap-urls/index.js | 2 +- package-lock.json | 135 +++++++++++++++--- package.json | 1 + .../{wrap-urls-test.js => wrap-urls-test.gjs} | 131 ++++++++--------- .../wrap-urls/{link-test.js => link-test.gjs} | 6 +- .../wrap-urls/{url-test.js => url-test.gjs} | 6 +- 7 files changed, 193 insertions(+), 95 deletions(-) rename tests/integration/components/{wrap-urls-test.js => wrap-urls-test.gjs} (63%) rename tests/integration/components/wrap-urls/{link-test.js => link-test.gjs} (84%) rename tests/integration/components/wrap-urls/{url-test.js => url-test.gjs} (81%) diff --git a/.vscode/settings.json b/.vscode/settings.json index fcf6617..634cedc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "eslint.validate": ["glimmer-ts", "glimmer-js"] -} + "eslint.validate": [ + "glimmer-ts", + "glimmer-js" + ] +} \ No newline at end of file diff --git a/addon/components/wrap-urls/index.js b/addon/components/wrap-urls/index.js index 2ab2d19..59ac542 100644 --- a/addon/components/wrap-urls/index.js +++ b/addon/components/wrap-urls/index.js @@ -1,5 +1,5 @@ import Component from '@glimmer/component'; -import Url from '@zestia/ember-wrap-urls/components/wrap-urls/url/index'; +import Url from '@zestia/ember-wrap-urls/components/wrap-urls/url'; export default class WrapUrlsComponent extends Component { get parts() { diff --git a/package-lock.json b/package-lock.json index 3713552..32832a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "ember-resolver": "^11.0.1", "ember-source": "~5.5.0", "ember-source-channel-url": "^3.0.0", + "ember-template-imports": "^4.0.0", "ember-template-lint": "^5.13.0", "ember-try": "^3.0.0", "eslint": "^8.55.0", @@ -10435,6 +10436,12 @@ } ] }, + "node_modules/content-tag": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/content-tag/-/content-tag-1.2.1.tgz", + "integrity": "sha512-aKOsM+GojHMvRuqOa+qamATA3IEK9QksXcIX2NSGHpU5euNhrg6mZFT3Z7kDuNz55sH9NRPJKqeGhkhaq9ED2w==", + "dev": true + }, "node_modules/content-type": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", @@ -15849,32 +15856,17 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/ember-template-imports": { - "version": "3.4.2", - "resolved": "https://registry.npmjs.org/ember-template-imports/-/ember-template-imports-3.4.2.tgz", - "integrity": "sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/ember-template-imports/-/ember-template-imports-4.0.0.tgz", + "integrity": "sha512-Kw1FnFX3MrBesfsjJDFvVgOf1mANOvMprAH1ngDd5SvdlkltNWCF2UKI9WXKQV3lw5noQC1+n6S80L9Q03D3Hw==", "dev": true, "dependencies": { - "babel-import-util": "^0.2.0", "broccoli-stew": "^3.0.0", - "ember-cli-babel-plugin-helpers": "^1.1.1", - "ember-cli-version-checker": "^5.1.2", - "line-column": "^1.0.2", - "magic-string": "^0.25.7", - "parse-static-imports": "^1.1.0", - "string.prototype.matchall": "^4.0.6", - "validate-peer-dependencies": "^1.1.0" + "content-tag": "^1.1.2", + "ember-cli-version-checker": "^5.1.2" }, "engines": { - "node": "12.* || >= 14" - } - }, - "node_modules/ember-template-imports/node_modules/babel-import-util": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/babel-import-util/-/babel-import-util-0.2.0.tgz", - "integrity": "sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==", - "dev": true, - "engines": { - "node": ">= 12.*" + "node": "16.* || >= 18" } }, "node_modules/ember-template-lint": { @@ -15909,6 +15901,15 @@ "node": "^14.18.0 || ^16.0.0 || >= 18.0.0" } }, + "node_modules/ember-template-lint/node_modules/babel-import-util": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/babel-import-util/-/babel-import-util-0.2.0.tgz", + "integrity": "sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==", + "dev": true, + "engines": { + "node": ">= 12.*" + } + }, "node_modules/ember-template-lint/node_modules/chalk": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", @@ -15921,6 +15922,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/ember-template-lint/node_modules/ember-template-imports": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/ember-template-imports/-/ember-template-imports-3.4.2.tgz", + "integrity": "sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==", + "dev": true, + "dependencies": { + "babel-import-util": "^0.2.0", + "broccoli-stew": "^3.0.0", + "ember-cli-babel-plugin-helpers": "^1.1.1", + "ember-cli-version-checker": "^5.1.2", + "line-column": "^1.0.2", + "magic-string": "^0.25.7", + "parse-static-imports": "^1.1.0", + "string.prototype.matchall": "^4.0.6", + "validate-peer-dependencies": "^1.1.0" + }, + "engines": { + "node": "12.* || >= 14" + } + }, "node_modules/ember-template-lint/node_modules/find-up": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz", @@ -17075,6 +17096,47 @@ "node": ">=0.10.0" } }, + "node_modules/eslint-plugin-ember/node_modules/babel-import-util": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/babel-import-util/-/babel-import-util-0.2.0.tgz", + "integrity": "sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 12.*" + } + }, + "node_modules/eslint-plugin-ember/node_modules/ember-template-imports": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/ember-template-imports/-/ember-template-imports-3.4.2.tgz", + "integrity": "sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==", + "dev": true, + "peer": true, + "dependencies": { + "babel-import-util": "^0.2.0", + "broccoli-stew": "^3.0.0", + "ember-cli-babel-plugin-helpers": "^1.1.1", + "ember-cli-version-checker": "^5.1.2", + "line-column": "^1.0.2", + "magic-string": "^0.25.7", + "parse-static-imports": "^1.1.0", + "string.prototype.matchall": "^4.0.6", + "validate-peer-dependencies": "^1.1.0" + }, + "engines": { + "node": "12.* || >= 14" + } + }, + "node_modules/eslint-plugin-ember/node_modules/ember-template-imports/node_modules/magic-string": { + "version": "0.25.9", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz", + "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==", + "dev": true, + "peer": true, + "dependencies": { + "sourcemap-codec": "^1.4.8" + } + }, "node_modules/eslint-plugin-ember/node_modules/magic-string": { "version": "0.30.5", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", @@ -23323,6 +23385,37 @@ "prettier": ">= 3.0.0" } }, + "node_modules/prettier-plugin-ember-template-tag/node_modules/babel-import-util": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/babel-import-util/-/babel-import-util-0.2.0.tgz", + "integrity": "sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==", + "dev": true, + "peer": true, + "engines": { + "node": ">= 12.*" + } + }, + "node_modules/prettier-plugin-ember-template-tag/node_modules/ember-template-imports": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/ember-template-imports/-/ember-template-imports-3.4.2.tgz", + "integrity": "sha512-OS8TUVG2kQYYwP3netunLVfeijPoOKIs1SvPQRTNOQX4Pu8xGGBEZmrv0U1YTnQn12Eg+p6w/0UdGbUnITjyzw==", + "dev": true, + "peer": true, + "dependencies": { + "babel-import-util": "^0.2.0", + "broccoli-stew": "^3.0.0", + "ember-cli-babel-plugin-helpers": "^1.1.1", + "ember-cli-version-checker": "^5.1.2", + "line-column": "^1.0.2", + "magic-string": "^0.25.7", + "parse-static-imports": "^1.1.0", + "string.prototype.matchall": "^4.0.6", + "validate-peer-dependencies": "^1.1.0" + }, + "engines": { + "node": "12.* || >= 14" + } + }, "node_modules/printf": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/printf/-/printf-0.6.1.tgz", diff --git a/package.json b/package.json index 8135866..5f495a8 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "ember-resolver": "^11.0.1", "ember-source": "~5.5.0", "ember-source-channel-url": "^3.0.0", + "ember-template-imports": "^4.0.0", "ember-template-lint": "^5.13.0", "ember-try": "^3.0.0", "eslint": "^8.55.0", diff --git a/tests/integration/components/wrap-urls-test.js b/tests/integration/components/wrap-urls-test.gjs similarity index 63% rename from tests/integration/components/wrap-urls-test.js rename to tests/integration/components/wrap-urls-test.gjs index a7135ef..867e155 100644 --- a/tests/integration/components/wrap-urls-test.js +++ b/tests/integration/components/wrap-urls-test.gjs @@ -1,10 +1,19 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, click, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; +import { + render, + rerender, + getRootElement, + click, + find +} from '@ember/test-helpers'; import { text } from 'dummy/utils/samples'; import Component from '@glimmer/component'; import { setComponentTemplate } from '@ember/component'; +import WrapUrls from '@zestia/ember-wrap-urls/components/wrap-urls'; +import Link from '@zestia/ember-wrap-urls/components/wrap-urls/link'; +import { tracked } from '@glimmer/tracking'; +import { on } from '@ember/modifier'; module('Integration | Component | wrap urls', function (hooks) { setupRenderingTest(hooks); @@ -12,26 +21,26 @@ module('Integration | Component | wrap urls', function (hooks) { test('it renders', async function (assert) { assert.expect(2); - await render(hbs``); + await render(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML, '', 'renders as a tagless component' ); - await render(hbs`foo`); + await render(); - assert.strictEqual(this.element.innerHTML, '', 'no block mode'); + assert.strictEqual(getRootElement().innerHTML, '', 'no block mode'); }); test('escaping', async function (assert) { assert.expect(1); - await render(hbs``); + await render(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML, '<script>', 'text is escaped' ); @@ -40,22 +49,22 @@ module('Integration | Component | wrap urls', function (hooks) { test('null text', async function (assert) { assert.expect(1); - this.text = null; + await render(); - await render(hbs``); - - assert.strictEqual(this.element.innerHTML, '', 'does not blow up'); + assert.strictEqual( + getRootElement().innerHTML, + '', + 'does not blow up' + ); }); test('it wraps urls', async function (assert) { assert.expect(1); - this.text = text; - - await render(hbs``); + await render(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML, 'http: http://foo.com\n' + 'https: https://bar.com\n' + 'ftp: ftp://baz.com\n' + @@ -71,14 +80,12 @@ module('Integration | Component | wrap urls', function (hooks) { test('it wraps urls as links', async function (assert) { assert.expect(1); - this.text = text; - - await render( - hbs`` - ); + await render(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML.trim(), 'http: http://foo.com\n' + 'https: https://bar.com\n' + 'ftp: ftp://baz.com\n' + @@ -94,13 +101,13 @@ module('Integration | Component | wrap urls', function (hooks) { test('safe strings', async function (assert) { assert.expect(1); - await render(hbs` + await render(); assert.strictEqual( - this.element.innerHTML.trim(), + getRootElement().innerHTML.trim(), 'visit https://example.com' ); }); @@ -108,21 +115,15 @@ module('Integration | Component | wrap urls', function (hooks) { test('custom component', async function (assert) { assert.expect(1); - const foo = hbs`{{@url.string}}`; - - const Foo = class extends Component {}; + // prettier-ignore + const Foo = ; - this.Foo = setComponentTemplate(foo, Foo); - - await render(hbs` - - `); + await render(); assert.strictEqual( - this.element.innerHTML.trim(), + getRootElement().innerHTML.trim(), 'visit http://my http://link' ); }); @@ -130,17 +131,14 @@ module('Integration | Component | wrap urls', function (hooks) { test('custom pattern', async function (assert) { assert.expect(1); - this.pattern = /mailto:(.*)?/g; + const pattern = /mailto:(.*)?/g; - await render(hbs` - - `); + await render(); assert.strictEqual( - this.element.innerHTML.trim(), + getRootElement().innerHTML.trim(), 'email me mailto:fred@smith.com' ); }); @@ -148,19 +146,23 @@ module('Integration | Component | wrap urls', function (hooks) { test('re-computing', async function (assert) { assert.expect(2); - this.text = 'http://foo.com'; + const state = new (class { + @tracked text = 'http://foo.com'; + })(); - await render(hbs``); + await render(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML, 'http://foo.com' ); - this.set('text', 'http://bar.com'); + state.text = 'http://bar.com'; + + await rerender(); assert.strictEqual( - this.element.innerHTML, + getRootElement().innerHTML, 'http://bar.com' ); }); @@ -168,21 +170,18 @@ module('Integration | Component | wrap urls', function (hooks) { test('start and end properties', async function (assert) { assert.expect(1); - const myLink = hbs`
{{@url.start}} {{@url.string}} {{@url.end}}
`; - - const MyLink = class extends Component {}; - - this.MyLink = setComponentTemplate(myLink, MyLink); + // prettier-ignore + const MyLink = ; - await render(hbs` + await render(); assert.strictEqual( - this.element.innerHTML.trim(), + getRootElement().innerHTML.trim(), 'One:
5 http://one.com 19
Two:
25 http://two.com 39
' ); }); @@ -190,15 +189,17 @@ module('Integration | Component | wrap urls', function (hooks) { test('issue: https://github.com/emberjs/ember.js/issues/17458', async function (assert) { assert.expect(0); - this.text = 'http://emberjs.com'; + const state = new (class { + @tracked text = 'http://emberjs.com'; + })(); - this.viewMore = () => this.set('text', 'Visit: http://emberjs.com'); + const viewMore = () => (state.text = 'Visit: http://emberjs.com'); - await render(hbs` - + await render(); // Mimic what Google Translate does const url = find('.wrapped-url'); diff --git a/tests/integration/components/wrap-urls/link-test.js b/tests/integration/components/wrap-urls/link-test.gjs similarity index 84% rename from tests/integration/components/wrap-urls/link-test.js rename to tests/integration/components/wrap-urls/link-test.gjs index e9b8755..06ae369 100644 --- a/tests/integration/components/wrap-urls/link-test.js +++ b/tests/integration/components/wrap-urls/link-test.gjs @@ -1,7 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; +import Link from '@zestia/ember-wrap-urls/components/wrap-urls/link'; module('wrap-urls/link', function (hooks) { setupRenderingTest(hooks); @@ -9,11 +9,11 @@ module('wrap-urls/link', function (hooks) { test('it renders', async function (assert) { assert.expect(4); - this.url = { + const url = { string: 'http://example.com' }; - await render(hbs``); + await render(); assert .dom('.wrapped-url-link') diff --git a/tests/integration/components/wrap-urls/url-test.js b/tests/integration/components/wrap-urls/url-test.gjs similarity index 81% rename from tests/integration/components/wrap-urls/url-test.js rename to tests/integration/components/wrap-urls/url-test.gjs index dfc4178..4540f02 100644 --- a/tests/integration/components/wrap-urls/url-test.js +++ b/tests/integration/components/wrap-urls/url-test.gjs @@ -1,7 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; +import Url from '@zestia/ember-wrap-urls/components/wrap-urls/url'; module('wrap-urls/url', function (hooks) { setupRenderingTest(hooks); @@ -9,11 +9,11 @@ module('wrap-urls/url', function (hooks) { test('it renders', async function (assert) { assert.expect(3); - this.url = { + const url = { string: 'http://example.com' }; - await render(hbs``); + await render(); assert .dom('.wrapped-url')