From 7bb10c135c91d6d9bfab3fd4e2e7bf999960ada8 Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 2 Nov 2023 15:04:13 +0800 Subject: [PATCH] build: bump to angular 17 --- .github/workflows/ci.yml | 15 ++-- .gitignore | 27 +++---- .nvmrc | 2 +- README.md | 32 +++++++++ angular.json | 40 +++++------ karma.conf.js | 101 ++++++++++++++------------- lib/ng-package.json | 2 +- lib/package.json | 3 +- lib/src/provide.ts | 13 ++++ lib/src/public_api.ts | 1 + lib/src/tinymce.component.ts | 62 ++++++++-------- lib/src/tinymce.module.ts | 3 +- lib/src/tinymce.options.ts | 4 +- lib/src/tinymce.spec.ts | 33 +++++---- lib/test.ts | 4 -- package.json | 66 +++++++++-------- src/app/app.component.ts | 6 +- src/app/app.module.ts | 40 ----------- src/app/home/home.component.ts | 5 ++ src/app/inline/inline.component.ts | 5 ++ src/app/other/other.component.ts | 5 ++ src/app/router.ts | 10 +++ src/app/standalone.component.ts | 16 ----- src/assets/fork.png | Bin 7791 -> 0 bytes src/environments/environment.prod.ts | 3 - src/environments/environment.ts | 8 --- src/index.html | 9 ++- src/main.ts | 24 ++++--- tsconfig.app.json | 8 ++- tsconfig.json | 5 +- tsconfig.spec.json | 9 ++- 31 files changed, 292 insertions(+), 269 deletions(-) create mode 100644 lib/src/provide.ts delete mode 100644 lib/test.ts delete mode 100644 src/app/app.module.ts create mode 100644 src/app/router.ts delete mode 100644 src/app/standalone.component.ts delete mode 100644 src/assets/fork.png delete mode 100644 src/environments/environment.prod.ts delete mode 100644 src/environments/environment.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 8cd060b..120904c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -28,11 +28,16 @@ jobs: cmd: install - name: run - run: | - yarn run test - cat ./coverage/lcov.info | ./node_modules/.bin/codecov - env: - CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} + run: yarn run test + + - uses: codecov/codecov-action@v3 + name: upload + with: + token: ${{ secrets.CODECOV_TOKEN }} + flags: unittests + files: ./coverage/cobertura-coverage.xml + fail_ci_if_error: true + verbose: true lint: runs-on: ubuntu-latest diff --git a/.gitignore b/.gitignore index 7a9d8f0..1f94fbe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,18 +1,18 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. -# compiled output +# Compiled output /dist /tmp /out-tsc -/publish -/yarn.lock -/.angular/cache +/bazel-out -# dependencies +# Node /node_modules +npm-debug.log +yarn-error.log # IDEs and editors -/.idea +.idea/ .project .classpath .c9/ @@ -20,23 +20,26 @@ .settings/ *.sublime-workspace -# IDE - VSCode +# Visual Studio Code .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json +.history/* -# misc -/.sass-cache +# Miscellaneous +/.angular/cache +.sass-cache/ /connect.lock /coverage /libpeerconnection.log -npm-debug.log -yarn-error.log testem.log /typings -# System Files +# System files .DS_Store Thumbs.db + +/publish +/yarn.lock diff --git a/.nvmrc b/.nvmrc index 6b17d22..3e558c9 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.16.1 +18.12.0 diff --git a/README.md b/README.md index 12bb621..19da713 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ import { NgxTinymceModule } from 'ngx-tinymce'; @NgModule({ imports: [ NgxTinymceModule.forRoot({ + // Local assets baseURL: './assets/tinymce/', // or cdn baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/' @@ -37,6 +38,37 @@ import { NgxTinymceModule } from 'ngx-tinymce'; export class AppModule { } ``` +If the local path should be adding assets configuration in `angular.json`: + +```json +"assets": [ + { + "glob": "**/tinymce.min.js", + "input": "./node_modules/tinymce", + "output": "assets/tinymce/" + } +] +``` + +### Standalone + +```ts +@Component({ + template: ``, + standalone: true, + imports: [TinymceComponent], +}) +export class App +``` + +Globa config: + +```ts +bootstrapApplication(AppComponent, { + providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})] +}); +``` + ### Usage ```ts diff --git a/angular.json b/angular.json index 2acd3ec..6ce4b79 100644 --- a/angular.json +++ b/angular.json @@ -14,15 +14,15 @@ } }, "root": "", - "sourceRoot": "src", + "sourceRoot": "", "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist", "index": "src/index.html", - "main": "src/main.ts", + "browser": "src/main.ts", "polyfills": [ "zone.js" ], @@ -49,21 +49,12 @@ "maximumError": "4kb" } ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" @@ -72,10 +63,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "ngx-tinymce:build:production" + "buildTarget": "ngx-tinymce:build:production" }, "development": { - "browserTarget": "ngx-tinymce:build:development" + "buildTarget": "ngx-tinymce:build:development" } }, "defaultConfiguration": "development" @@ -83,16 +74,21 @@ "test": { "builder": "@angular-devkit/build-angular:karma", "options": { - "main": "lib/test.ts", - "tsConfig": "tsconfig.spec.json", - "karmaConfig": "karma.conf.js", + "karmaConfig": "./karma.conf.js", "polyfills": [ "zone.js", "zone.js/testing" ], + "tsConfig": "tsconfig.spec.json", "include": [ - "../lib/test.ts", - "../lib/**/*.spec.ts" + "lib/**/*.spec.ts" + ], + "assets": [ + { + "glob": "**/tinymce.min.js", + "input": "./node_modules/tinymce", + "output": "assets/tinymce/" + } ] } }, @@ -109,9 +105,5 @@ } } } - }, - "defaultProject": "ngx-tinymce", - "cli": { - "defaultCollection": "@angular-eslint/schematics" } } diff --git a/karma.conf.js b/karma.conf.js index 5ccad91..91ca45a 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,50 +1,51 @@ -// Karma configuration file, see link for more information -// https://karma-runner.github.io/1.0/config/configuration-file.html - -module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [ - require('karma-jasmine'), - require('karma-chrome-launcher'), - require('karma-jasmine-html-reporter'), - require('karma-coverage'), - require('@angular-devkit/build-angular/plugins/karma') - ], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, './coverage'), - subdir: '.', - reporters: [ - { type: 'html' }, - { type: 'text-summary' } - ] - }, - reporters: ['progress', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['Chrome'], - singleRun: false, - restartOnFileChange: true, - customLaunchers: { - ChromeHeadlessCI: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'], - }, - } - }); -}; +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, './coverage'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' }, + { type: 'cobertura' }, + ] + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false, + restartOnFileChange: true, + customLaunchers: { + ChromeHeadlessCI: { + base: 'ChromeHeadless', + flags: ['--no-sandbox'], + }, + } + }); +}; diff --git a/lib/ng-package.json b/lib/ng-package.json index 455c034..8d00aad 100644 --- a/lib/ng-package.json +++ b/lib/ng-package.json @@ -5,5 +5,5 @@ "lib": { "entryFile": "src/public_api.ts" }, - "allowedNonPeerDependencies": ["@ng-util/util", "@ng-util/lazy"] + "allowedNonPeerDependencies": ["@ng-util/lazy"] } diff --git a/lib/package.json b/lib/package.json index 2a07062..67d6cd2 100644 --- a/lib/package.json +++ b/lib/package.json @@ -20,7 +20,6 @@ }, "homepage": "https://cipchk.github.io/ngx-tinymce/", "dependencies": { - "@ng-util/lazy": "^14.0.0", - "@ng-util/util": "^14.0.0" + "@ng-util/lazy": "^17.0.0-rc.0" } } diff --git a/lib/src/provide.ts b/lib/src/provide.ts new file mode 100644 index 0000000..9a5eaeb --- /dev/null +++ b/lib/src/provide.ts @@ -0,0 +1,13 @@ +import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core'; +import { TinymceOptions } from './tinymce.options'; + +/** + * Sets up providers necessary to config for the Tinymce. + * @example + * bootstrapApplication(AppComponent, { + * providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})] + * }); + */ +export function provideTinymce(options: TinymceOptions): EnvironmentProviders { + return makeEnvironmentProviders([{ provide: TinymceOptions, useValue: options }]); +} diff --git a/lib/src/public_api.ts b/lib/src/public_api.ts index e0f77cc..b9dfd2f 100644 --- a/lib/src/public_api.ts +++ b/lib/src/public_api.ts @@ -1,3 +1,4 @@ export * from './tinymce.options'; export { TinymceComponent } from './tinymce.component'; export * from './tinymce.module'; +export * from './provide'; diff --git a/lib/src/tinymce.component.ts b/lib/src/tinymce.component.ts index 41f9d97..af1aed2 100644 --- a/lib/src/tinymce.component.ts +++ b/lib/src/tinymce.component.ts @@ -15,15 +15,21 @@ import { NgZone, Inject, SimpleChange, + Optional, + booleanAttribute, + numberAttribute, } from '@angular/core'; import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; -import { InputBoolean, InputNumber } from '@ng-util/util'; import { NuLazyService } from '@ng-util/lazy'; +import { DOCUMENT, NgIf } from '@angular/common'; +import type { Editor as TinyMCEEditor, RawEditorOptions } from 'tinymce'; import { TinymceOptions } from './tinymce.options'; -import { DOCUMENT } from '@angular/common'; const isSSR = !(typeof document === 'object' && !!document); +/** + * Angular for tinymce, You can modify the global configuration via `provideTinymce` + */ @Component({ selector: 'tinymce', exportAs: 'tinymce', @@ -51,13 +57,11 @@ const isSSR = !(typeof document === 'object' && !!document); preserveWhitespaces: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgIf], }) export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor { - static ngAcceptInputType_inline: string | boolean | null | undefined; - static ngAcceptInputType_disabled: string | boolean | null | undefined; - static ngAcceptInputType_delay: string | number | null | undefined; - - private _instance: any; + private _instance?: TinyMCEEditor | null; private value = ''; load = true; id = `_tinymce-${Math.random().toString(36).substring(2)}`; @@ -65,11 +69,10 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co private onChange!: (value: string) => void; private onTouched!: () => void; - @Input() config: any; + @Input() config?: RawEditorOptions | null; @Input() placeholder = ''; - @Input() @InputBoolean() inline = false; - @Input() - @InputBoolean() + @Input({ transform: booleanAttribute }) inline = false; + @Input({ transform: booleanAttribute }) set disabled(value: boolean) { this._disabled = value; this.setDisabled(); @@ -88,10 +91,10 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co } } /** 延迟初始化 */ - @Input() @InputNumber() delay = 0; - @Output() ready = new EventEmitter(); + @Input({ transform: numberAttribute }) delay = 0; + @Output() ready = new EventEmitter(); - get instance(): any { + get instance(): TinyMCEEditor | undefined | null { return this._instance; } @@ -100,7 +103,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co } constructor( - private defConfig: TinymceOptions, + @Optional() private defConfig: TinymceOptions, private lazySrv: NuLazyService, private ngZone: NgZone, @Inject(DOCUMENT) private doc: any, @@ -125,21 +128,21 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co return; } - if (defConfig.baseURL) { + if (defConfig?.baseURL) { let url = '' + defConfig.baseURL; if (url.endsWith('/')) { url = url.substring(0, url.length - 1); } win.tinymce.baseURL = url; } - const userOptions = { ...defConfig.config, ...config }; - const options = { + const userOptions = { ...defConfig?.config, ...config }; + const options: RawEditorOptions = { selector: `#` + id, inline, - ...defConfig.config, + ...defConfig?.config, ...config, - setup: (editor: any) => { + setup: (editor) => { this._instance = editor; if (this.onChange) { editor.on('change keyup', () => { @@ -151,7 +154,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co userOptions.setup(editor); } }, - init_instance_callback: (editor: any) => { + init_instance_callback: (editor) => { if (editor && this.value) { editor.setContent(this.value); } @@ -159,7 +162,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co if (typeof userOptions.init_instance_callback === 'function') { userOptions.init_instance_callback(editor); } - this.ready.emit(this._instance); + this.ready.emit(editor); }, }; if (userOptions.auto_focus) { @@ -173,12 +176,12 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co } private destroy(): void { - if (!this._instance) { + if (this._instance == null) { return; } this.ngZone.runOutsideAngular(() => { - this._instance.off(); - this._instance.remove('#' + this.id); + this._instance!.off(); + this._instance!.remove(); }); this._instance = null; } @@ -190,10 +193,11 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co this.ngZone.runOutsideAngular(() => { const mode = this._disabled ? 'readonly' : 'design'; // Compatible with 5 - if (typeof this._instance.setMode === 'function') { - this._instance.setMode(mode); + const setMode5 = (this._instance as any).setMode; + if (typeof setMode5 === 'function') { + setMode5(mode); } else { - this._instance.mode.set(mode); + this._instance!.mode.set(mode); } }); } @@ -231,7 +235,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co // value should be NOT NULL this.value = value || ''; if (this._instance) { - this.ngZone.runOutsideAngular(() => this._instance.setContent(this.value)); + this.ngZone.runOutsideAngular(() => this._instance!.setContent(this.value)); } } diff --git a/lib/src/tinymce.module.ts b/lib/src/tinymce.module.ts index ebb259f..8954897 100644 --- a/lib/src/tinymce.module.ts +++ b/lib/src/tinymce.module.ts @@ -5,8 +5,7 @@ import { TinymceOptions } from './tinymce.options'; import { TinymceComponent } from './tinymce.component'; @NgModule({ - imports: [CommonModule], - declarations: [TinymceComponent], + imports: [CommonModule, TinymceComponent], exports: [TinymceComponent], }) export class NgxTinymceModule { diff --git a/lib/src/tinymce.options.ts b/lib/src/tinymce.options.ts index eb3e083..b350457 100644 --- a/lib/src/tinymce.options.ts +++ b/lib/src/tinymce.options.ts @@ -1,10 +1,12 @@ +import type { RawEditorOptions } from 'tinymce'; + export class TinymceOptions { /** 指定tinymce目录路径，默认：`./assets/tinymce/` */ baseURL?: string = './assets/tinymce/'; /** 指定tinymce文件名，默认：`tinymce.min.js` */ fileName?: string = 'tinymce.min.js'; /** 默认配置项，对全局 Tinymce 有效 */ - config?: any; + config?: RawEditorOptions; /** 延迟加载（单位：毫秒），默认：`0` */ delay?: number; } diff --git a/lib/src/tinymce.spec.ts b/lib/src/tinymce.spec.ts index 1441658..4852df0 100644 --- a/lib/src/tinymce.spec.ts +++ b/lib/src/tinymce.spec.ts @@ -2,35 +2,38 @@ import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { NgxTinymceModule } from './tinymce.module'; +import { FormsModule } from '@angular/forms'; +import { RawEditorOptions } from 'tinymce'; -const html = ``; +const delay = (ms?: number) => new Promise((res) => setTimeout(res, ms ?? 1000)); describe('Component: ngx-tinymce', () => { let fixture: ComponentFixture; let context: TestComponent; - let element: any; - let clean: any; - beforeEach(() => { - TestBed.configureTestingModule({ + beforeEach(async () => { + await TestBed.configureTestingModule({ declarations: [TestComponent], - imports: [NgxTinymceModule], - }); - TestBed.overrideComponent(TestComponent, { set: { template: html } }); + imports: [NgxTinymceModule, FormsModule], + }).compileComponents(); fixture = TestBed.createComponent(TestComponent); context = fixture.componentInstance; - element = fixture.nativeElement.querySelector('#c1'); - clean = fixture.nativeElement.querySelector('#c2'); - fixture.detectChanges(); }); - it('fixture should not be null', () => { - expect(fixture).not.toBeNull(); + it('fixture should not be null', async () => { + context.config = { setup: jasmine.createSpy() }; + fixture.detectChanges(); + await delay(); + expect(context.config.setup).toHaveBeenCalled(); }); }); @Component({ selector: 'app-tinymce-test', - template: '', + template: '', }) -class TestComponent {} +class TestComponent { + value = `

a

`; + config?: RawEditorOptions | null; + onReady(): void {} +} diff --git a/lib/test.ts b/lib/test.ts deleted file mode 100644 index 089ddda..0000000 --- a/lib/test.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; - -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); diff --git a/package.json b/package.json index e86ddef..5635273 100644 --- a/package.json +++ b/package.json @@ -20,51 +20,49 @@ }, "homepage": "https://cipchk.github.io/ngx-tinymce/", "scripts": { - "analyze": "ng b --stats-json --source-map", "lint": "ng lint", - "test": "ng t --no-progress --browsers=ChromeHeadlessCI --code-coverage --no-watch", + "test": "ng t --no-progress --code-coverage --no-watch --browsers=ChromeHeadless", "build": "node scripts/build.js", - "release:next": "npm run build && cd publish && npm publish --access public --tag next", - "release": "npm run build && cd publish && npm publish --access public" + "release": "npm run build && cd publish && npm publish --access public", + "release:next": "npm run build && cd publish && npm publish --access public --tag next" }, "dependencies": { - "@angular/animations": "^16.0.0", - "@angular/common": "^16.0.0", - "@angular/compiler": "^16.0.0", - "@angular/core": "^16.0.0", - "@angular/forms": "^16.0.0", - "@angular/platform-browser": "^16.0.0", - "@angular/platform-browser-dynamic": "^16.0.0", - "@angular/router": "^16.0.0", + "@angular/animations": "^17.0.0-next.0", + "@angular/common": "^17.0.0-next.0", + "@angular/compiler": "^17.0.0-next.0", + "@angular/core": "^17.0.0-next.0", + "@angular/forms": "^17.0.0-next.0", + "@angular/platform-browser": "^17.0.0-next.0", + "@angular/platform-browser-dynamic": "^17.0.0-next.0", + "@angular/router": "^17.0.0-next.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.13.0", - "bootstrap": "^5.3.0", - "@ng-util/lazy": "^16.0.0", - "@ng-util/util": "^16.0.0", - "ngx-highlight-js": "^16.0.0" + "zone.js": "~0.14.0", + "bootstrap": "^5.3.2", + "@ng-util/lazy": "^17.0.0-rc.0", + "ngx-highlight-js": "^17.0.0-rc.0", + "tinymce": "^6.7.2" }, "devDependencies": { - "@angular-devkit/build-angular": "^16.0.3", - "@angular/cli": "~16.0.3", - "@angular/compiler-cli": "^16.0.0", - "@types/jasmine": "~4.3.0", - "jasmine-core": "~4.6.0", + "@angular-devkit/build-angular": "^17.0.0-rc.2", + "@angular/cli": "^17.0.0-rc.2", + "@angular/compiler-cli": "^17.0.0-next.0", + "@types/jasmine": "~5.1.0", + "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", - "karma-jasmine-html-reporter": "~2.0.0", - "typescript": "~5.0.2", - "@angular-eslint/builder": "^16.0.3", - "@angular-eslint/eslint-plugin": "^16.0.3", - "@angular-eslint/eslint-plugin-template": "^16.0.3", - "@angular-eslint/schematics": "^16.0.3", - "@angular-eslint/template-parser": "^16.0.3", - "@typescript-eslint/eslint-plugin": "^5.59.8", - "@typescript-eslint/parser": "^5.59.8", - "codecov": "^3.8.3", - "eslint": "^8.42.0", - "ng-packagr": "^16.0.1" + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.2.2", + "@angular-eslint/builder": "^16.2.0", + "@angular-eslint/eslint-plugin": "^16.2.0", + "@angular-eslint/eslint-plugin-template": "^16.2.0", + "@angular-eslint/schematics": "^16.2.0", + "@angular-eslint/template-parser": "^16.2.0", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "eslint": "^8.52.0", + "ng-packagr": "^17.0.0-rc.1" } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 60fa1c6..68d1f0f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ import { Component, ViewEncapsulation } from '@angular/core'; +import { RouterLink, RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', @@ -27,9 +28,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
  • Inline
    • -
  • - Standalone -
    • @@ -37,5 +35,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
    `, encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [RouterOutlet, RouterLink], }) export class AppComponent {} diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index 0ee9e99..0000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { HttpClientModule } from '@angular/common/http'; -import { RouterModule } from '@angular/router'; -import { FormsModule } from '@angular/forms'; -import { HighlightJsModule } from 'ngx-highlight-js'; -import { NgxTinymceModule } from 'ngx-tinymce'; - -import { AppComponent } from './app.component'; -import { HomeComponent } from './home/home.component'; -import { OtherComponent } from './other/other.component'; -import { InlineComponent } from './inline/inline.component'; -import { StandaloneDemoComponent } from './standalone.component'; - -@NgModule({ - declarations: [AppComponent, HomeComponent, OtherComponent, InlineComponent], - imports: [ - BrowserModule, - CommonModule, - FormsModule, - HttpClientModule, - HighlightJsModule, - RouterModule.forRoot( - [ - { path: '', component: HomeComponent }, - { path: 'other', component: OtherComponent }, - { path: 'inline', component: InlineComponent }, - { path: 'standalone', component: StandaloneDemoComponent }, - ], - { useHash: true }, - ), - NgxTinymceModule.forRoot({ - // baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/', - baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/', - }), - ], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 21b7d83..3ad432d 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { DomSanitizer } from '@angular/platform-browser'; +import { HighlightJsDirective } from 'ngx-highlight-js'; +import { TinymceComponent } from 'ngx-tinymce'; @Component({ selector: 'app-home', templateUrl: './home.component.html', + standalone: true, + imports: [FormsModule, HighlightJsDirective, TinymceComponent], }) export class HomeComponent { html = ` diff --git a/src/app/inline/inline.component.ts b/src/app/inline/inline.component.ts index 0c1c928..4aa1a04 100644 --- a/src/app/inline/inline.component.ts +++ b/src/app/inline/inline.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { DomSanitizer } from '@angular/platform-browser'; +import { HighlightJsDirective } from 'ngx-highlight-js'; +import { TinymceComponent } from 'ngx-tinymce'; @Component({ selector: 'app-inline', templateUrl: './inline.component.html', + standalone: true, + imports: [FormsModule, HighlightJsDirective, TinymceComponent], }) export class InlineComponent { html = ` diff --git a/src/app/other/other.component.ts b/src/app/other/other.component.ts index 0383c05..2bf82b7 100644 --- a/src/app/other/other.component.ts +++ b/src/app/other/other.component.ts @@ -1,9 +1,14 @@ import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HighlightJsDirective } from 'ngx-highlight-js'; +import { TinymceComponent } from 'ngx-tinymce'; @Component({ selector: 'app-other', templateUrl: './other.component.html', styleUrls: ['./other.component.less'], + standalone: true, + imports: [FormsModule, HighlightJsDirective, TinymceComponent], }) export class OtherComponent { html = `now: ${+new Date()}`; diff --git a/src/app/router.ts b/src/app/router.ts new file mode 100644 index 0000000..d5bf2c2 --- /dev/null +++ b/src/app/router.ts @@ -0,0 +1,10 @@ +import { Route } from '@angular/router'; +import { HomeComponent } from './home/home.component'; +import { OtherComponent } from './other/other.component'; +import { InlineComponent } from './inline/inline.component'; + +export const ROUTERS: Route[] = [ + { path: '', component: HomeComponent }, + { path: 'other', component: OtherComponent }, + { path: 'inline', component: InlineComponent }, +]; diff --git a/src/app/standalone.component.ts b/src/app/standalone.component.ts deleted file mode 100644 index 4fbd23d..0000000 --- a/src/app/standalone.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { Component } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { NgxTinymceModule } from 'ngx-tinymce'; - -@Component({ - selector: 'standalone-demo', - template: ` `, - standalone: true, - imports: [FormsModule, NgxTinymceModule], -}) -export class StandaloneDemoComponent { - html = `HTMLS`; - config = { - height: 350, - }; -} diff --git a/src/assets/fork.png b/src/assets/fork.png deleted file mode 100644 index 146ef8a800602169cf78c686fc5a6d138a76bc0a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7791 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 Loading... - - Fork me on GitHub + + Fork me on GitHub diff --git a/src/main.ts b/src/main.ts index a6c3afe..dc409c8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,12 +1,14 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { enableProdMode } from '@angular/core'; -import { environment } from './environments/environment'; -import { AppModule } from './app/app.module'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app/app.component'; +import { provideHttpClient } from '@angular/common/http'; +import { provideRouter, withHashLocation } from '@angular/router'; +import { ROUTERS } from './app/router'; +import { provideTinymce } from 'ngx-tinymce'; -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.error(err)); +bootstrapApplication(AppComponent, { + providers: [ + provideHttpClient(), + provideRouter(ROUTERS, withHashLocation()), + provideTinymce({ baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/' }), + ], +}).catch((err) => console.error(err)); diff --git a/tsconfig.app.json b/tsconfig.app.json index 84f1f99..374cc9d 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -5,6 +5,10 @@ "outDir": "./out-tsc/app", "types": [] }, - "files": ["src/main.ts"], - "include": ["src/**/*.d.ts"] + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] } diff --git a/tsconfig.json b/tsconfig.json index 8b57445..1a8f97e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, + "allowSyntheticDefaultImports": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, @@ -24,7 +25,9 @@ "dom" ], "paths": { - "ngx-tinymce": ["lib/src/index"] + "ngx-tinymce": [ + "lib/src/index" + ] } }, "angularCompilerOptions": { diff --git a/tsconfig.spec.json b/tsconfig.spec.json index a0bad79..57f6f1d 100644 --- a/tsconfig.spec.json +++ b/tsconfig.spec.json @@ -3,8 +3,11 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/spec", - "types": ["jasmine"] + "types": [ + "jasmine" + ] }, - "files": ["lib/test.ts"], - "include": ["lib/**/*.spec.ts", "lib/**/*.d.ts"] + "include": [ + "lib/**/*.spec.ts" + ] }