mercredi 29 décembre 2021

Is it even possible to run an ember 2.18 application in this decade?

I have to make some adjustments to the project done with ember 2.18.2, and it is a complete disaster right now.

I'm using macOS BigSur(11.6) and this is the pckage.json:

"body-parser": "^1.15.2",
"broccoli-asset-rev": "^2.4.5",
"ember-ace": "1.3.2",
"ember-ajax": "^3.0.0",
"ember-browserify": "^1.2.1",
"ember-changeset": "1.2.0",
"ember-changeset-validations": "1.2.4",
"ember-cli": "2.18.2",
"ember-cli-app-version": "^3.0.0",
"ember-cli-babel": "^6.6.0",
"ember-cli-clipboard": "0.13.0",
"ember-cli-dependency-checker": "^2.0.0",
"ember-cli-eslint": "^4.2.1",
"ember-cli-head": "^0.4.1",
"ember-cli-htmlbars": "^2.0.1",
"ember-cli-htmlbars-inline-precompile": "^1.0.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-markdown-editor": "^0.1.0",
"ember-cli-mirage": "0.2.9",
"ember-cli-moment-shim": "2.0.0",
"ember-cli-page-object": "1.8.0",
"ember-cli-qunit": "4.2.1",
"ember-cli-release": "^0.2.9",
"ember-cli-sentry": "3.0.0-beta.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-spinner": "0.0.9",
"ember-cli-sri": "^2.1.0",
"ember-cli-stylus": "1.0.6",
"ember-cli-uglify": "^2.0.0",
"ember-click-outside": "1.3.0",
"ember-data": "2.18.2",
"ember-data-has-many-query": "0.2.0",
"ember-export-application-global": "^2.0.0",
"ember-file-upload": "^3.0.5",
"ember-font-awesome": "3.1.1",
"ember-inflector": "^3.0.1",
"ember-intercom-io": "0.1.4",
"ember-load-initializers": "^1.0.0",
"ember-maybe-import-regenerator": "0.1.6",
"ember-metrics": "0.14.0",
"ember-modifier-manager-polyfill": "^1.2.0",
"ember-moment": "7.0.0-beta.3",
"ember-power-select": "1.10.4",
"ember-power-select-with-create": "0.4.0",
"ember-qunit": "3.3.0",
"ember-radio-buttons": "4.1.0",
"ember-resolver": "^4.0.0",
"ember-route-action-helper": "2.0.6",

As far as I understood I need watchman 4.9 for this project, which I tried to install from their git, by using something like this:

  1. git clone https://github.com/facebook/watchman.git (or download zip file from link above) ,
  2. cd watchman ,
  3. git checkout v4.6.0 ,
  4. ./autogen.sh ,
  5. ./configure ,
  6. make ,
  7. sudo make install

I can't install this version, since step 4 starts to break, and the thread regarding the issue contains absolutely nothing.

I tried to use autoconf to compile it, but still, same errors as from the git issue above.

So my question is simple, can I run it? Maybe avoid using watchman at all?




dimanche 26 décembre 2021

Ember js Build Error (broccoli-persistent-filter:EslintValidationFilter)

After cloning the repository from Github then install npm and try to execute ember s. but I got this error. Then I delete node modules directory and package-lock.json file and install npm again. But i can't solve it.I am googling this error but can't solve it. Plz, Help me. Here is my Error:

Build Error (broccoli-persistent-filter:EslintValidationFilter) in helpers/flash- 
message.js

Package subpath './lib/util/traverser' is not defined by "exports" in 
/home/ag/Office/ecommerce/front-end/node_modules/eslint/package.json


Stack Trace and Error Report: /tmp/error.dump.a671c24c39f689554c47c73d068f7e9f.log

My Package.json:

{
"name": "front-end",
"version": "0.0.0",
"private": true,
"description": "Small description for front-end goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"@ember/jquery": "^0.6.0",
"@ember/optional-features": "^0.7.0",
"broccoli-asset-rev": "^3.0.0",
"ember-ajax": "^5.0.0",
"ember-aria-tabs": "^3.0.0",
"ember-auto-import": "^1.10.1",
"ember-cli": "~3.12.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.7.3",
"ember-cli-bootstrap-4": "^0.12.0",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-flash": "^2.1.0",
"ember-cli-form-data": "^2.1.1",
"ember-cli-htmlbars": "^3.0.1",
"ember-cli-htmlbars-inline-precompile": "^2.1.0",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-moment-shim": "^3.8.0",
"ember-cli-sass": "^10.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-swiper": "^1.0.6",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-composable-helpers": "^2.4.0",
"ember-concurrency": "^1.3.0",
"ember-cp-validations": "^4.0.0-beta.12",
"ember-crumbly": "^3.0.1",
"ember-data": "~3.12.0",
"ember-drag-drop": "^0.9.0-beta.0",
"ember-export-application-global": "^2.0.0",
"ember-fetch": "^8.1.0",
"ember-font-awesome": "^4.0.0-rc.4",
"ember-load-initializers": "^2.0.0",
"ember-local-storage": "^1.7.2",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-modal-dialog": "^3.0.1",
"ember-moment": "^8.0.1",
"ember-pickr": "^2.2.1",
"ember-power-select": "^3.0.2",
"ember-qunit": "^4.4.1",
"ember-resize": "^0.3.4",
"ember-resolver": "^5.0.1",
"ember-source": "~3.12.0",
"ember-toggle": "^7.1.0",
"ember-tooltips": "^3.4.5",
"ember-uuid": "^2.1.0",
"ember-welcome-page": "^4.0.0",
"eslint-plugin-ember": "^6.2.0",
"eslint-plugin-node": "^9.0.1",
"loader.js": "^4.7.0",
"popper.js": "^1.16.1",
"qunit-dom": "^0.8.4",
"sass": "^1.30.0"
},
"engines": {
"node": "8.* || >= 10.*"
},
"dependencies": {
"drift-zoom": "^1.5.0"
}
}

If anyone has any idea about this error then comment or answer it. I will vote and accept the answer.




vendredi 24 décembre 2021

Component in a loop does not show the last component in ember js

I'm a beginner to ember js. Here I'm looping a component called colored-box in the 'reading.hbs' file. This loop of components shows all the other elements with relevant properties. But the last element is not showing. In the component js file, I have used observes method with init. I'm downloading a pdf which is generated using the html rendered with this code with pdfReadctor. I got this issue in the downloaded pdf. I have attached the image of the place where I have the issue. I can't figure out what the reason is. Can anyone please help me to figure out the problem? Below I have attached the code.

Figure 1.) reading.hbs enter image description here

Figure 2.) colored-box.hbs - component file enter image description here

Figure 3.) colored-box.js enter image description here

enter image description here




jeudi 16 décembre 2021

EmberJs new project throws Decorating class property failed

I tried to use ember cli to generate local project, but when visiting localhost:4200, I met below errors:

Error occurred:

- While rendering:
  -top-level
    application

Uncaught Error: Decorating class property failed. Please ensure that proposal-class-properties is enabled and runs after the decorators transform.

and ember -v gives this:

ember-cli: 3.28.4
node: 16.13.1
os: darwin x64

Please help to point out the reason.

Thanks




samedi 11 décembre 2021

Ember Octane on 'keyup' or 'keydown' is not firing

I have a glimmer Component in an Ember Octane app like this

import Component from '@glimmer/component';
import { action } from '@ember/object';


export default class TestComponent extends Component {
  @action
  handleEvent(event) {
    console.log(event);
  }
}

and in my HTML I have

<div ></div>

but handleEvent is not firing even when changing to 'keyDown' for example. It says in the documentation

The event can be any event name, not just the click event, which makes perfect for handling any kind of DOM event. For a list of native browser events, see the MDN documentation

But that doesn't seem to be true!

Is there an "Ember way" to handle keyboard events without installing an outer library (modifier) or should I stick with native event listeners?




mardi 7 décembre 2021

What is the windows cmd equivalent of the command target=mock country=UK ember s?

How can we write the same command

target=mock country=UK ember s

in windows command prompt?

Are we supposed to use any of these?

ember s & target=mock & country=UK
ember s && target=mock && country=UK



samedi 4 décembre 2021

Is using an api server like rest for my backend a secure way?

Nowadays I see websites are made using a sperate api backend server which provides the data from the database called a REST API server. When I was at school they taught me how to connect to apache using php to access the database!! I was thinking is this is safe (using api)?? Like if I have such an api which gives data from the database anyone can request a direct api call and steal that data. I know there is something called api token and private apis. But if somehow someone manages to break that then the my server will make all data public. Isnt the old method more safe because only my website has access to the database. I just want to know how exactly does this backend rest api works? I had done a project and my rest api can be accessed by anyone using my websites url.

Please someone explain the foundation of using such separate app for backend




vendredi 3 décembre 2021

Emberjs : Open modal from otther modal only when the first has left the DOM

I use Emberjs 3.19.0 (actually I can't change the version) whith "ember-modal-dialog": "^3.0.0-beta.4".

In my index.hbs I have 2 buttons which allow me to open 2 different modals. These modals have different models but both have a captcha generated on the fly, I want to be able to initiate the opening of a modal from another modal. I am having an issue with the source modal lifecycle that causes the target modal's captcha to not load. I think the captcha is still part of the dom on the first modal.

Currently I am transmitting a function of the index.js to the first modal but I had to put a await new Promise(resolve => setTimeout(resolve, 400)); that allows me to wait until the first modal is completely outside the dom before opening the second. This solution is not clean, I ask you if you have another idea?




ember-cordova - Invalid or unexpected token on __dirname

I'm trying to build Android app using my Ember frontend and Cordova.

  1. I've configured project as described in ember-cordova docs (changed rootURL and locationType),
  2. I installed ember-cordova via ember install ember-cordova,
  3. Changed app name and widget id in cordova/config.xml,
  4. Added required platform - ember cdv:platform add android,
  5. And I'm trying to build first version of my app using ember cdv:build --platform=android --environment=production.

Unfortunatelly, build fails with error:

EmberCordovaError: Invalid or unexpected token


Stack Trace and Error Report: /tmp/error.dump.0bfefb855ac286c6b6600c600e92d126.log

It happens both on Ubuntu 21.10 and macOS Monterey. I'm using node v12.22.7 installed via node version manager (tried using node from apt packages on Ubuntu, but it didn't help), ember-cordova v1.0.9, and ember v3.12.1.

Full error log:

=================================================================================

ENV Summary:

  TIME: Fri Dec 03 2021 12:37:28 GMT+0100 (GMT+01:00)
  TITLE: ember
  ARGV:
  - /home/tomasz/.nvm/versions/node/v12.22.7/bin/node
  - /home/tomasz/.nvm/versions/node/v12.22.7/bin/ember
  - cdv:build
  - --platform=android
  - --environment=production
  EXEC_PATH: /home/tomasz/.nvm/versions/node/v12.22.7/bin/node
  TMPDIR: /tmp
  SHELL: /bin/bash
  PATH:
  - /home/tomasz/.rvm/gems/ruby-3.0.3/bin
  - /home/tomasz/.rvm/gems/ruby-3.0.3@global/bin
  - /home/tomasz/.rvm/rubies/ruby-3.0.3/bin
  - /home/tomasz/.rvm/bin
  - /home/tomasz/.local/bin
  - /home/tomasz/bin
  - /home/tomasz/.nvm/versions/node/v12.22.7/bin
  - /home/tomasz/.local/bin
  - /home/tomasz/bin
  - /usr/local/sbin
  - /usr/local/bin
  - /usr/sbin
  - /usr/bin
  - /sbin
  - /bin
  - /usr/games
  - /usr/local/games
  - /snap/bin
  - /home/tomasz/.rvm/bin
  PLATFORM: linux x64
  FREEMEM: 18971971584
  TOTALMEM: 33553645568
  UPTIME: 4862
  LOADAVG: 6.15,4.98,3.74
  CPUS:
  - Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz - 3505
  - Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz - 3565
  - Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz - 3800
  - Intel(R) Core(TM) i5-4670 CPU @ 3.40GHz - 3800
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.17.2
  - brotli: 1.0.9
  - cldr: 37.0
  - http_parser: 2.9.4
  - icu: 67.1
  - llhttp: 2.1.4
  - modules: 72
  - napi: 8
  - nghttp2: 1.41.0
  - node: 12.22.7
  - openssl: 1.1.1l
  - tz: 2019c
  - unicode: 13.0
  - uv: 1.40.0
  - v8: 7.8.279.23-node.56
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - code: [undefined]
  - codeFrame: [undefined]
  - errorMessage: EmberCordovaError: Invalid or unexpected token
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: EmberCordovaError: Invalid or unexpected token
  - name: EmberCordovaError
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: (function (exports, require, module, __filename, __dirname) { #!/usr/bin/env node
                                                              ^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:88:7)
    at createScript (vm.js:261:10)
    at Object.runInThisContext (vm.js:309:10)
    at wrapSafe (internal/modules/cjs/loader.js:902:15)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Api.getPlatformInfo (/home/tomasz/Projects/app-ember/ember-cordova/cordova/platforms/android/cordova/Api.js:174:22)
    at /home/tomasz/Projects/app-ember/node_modules/cordova-lib/src/cordova/prepare.js:53:67
    at Array.map (<anonymous>:null:null)
    at /home/tomasz/Projects/app-ember/node_modules/cordova-lib/src/cordova/prepare.js:51:43
    at _fulfilled (/home/tomasz/Projects/app-ember/node_modules/cordova-lib/node_modules/q/q.js:787:54)
    at /home/tomasz/Projects/app-ember/node_modules/cordova-lib/node_modules/q/q.js:816:30
    at Promise.promise.promiseDispatch (/home/tomasz/Projects/app-ember/node_modules/cordova-lib/node_modules/q/q.js:749:13)
    at /home/tomasz/Projects/app-ember/node_modules/cordova-lib/node_modules/q/q.js:557:44
    at flush (/home/tomasz/Projects/app-ember/node_modules/cordova-lib/node_modules/q/q.js:108:17)
    at processTicksAndRejections (internal/process/task_queues.js:79:11)


=================================================================================

What could be a reason of such a failure?