Fable D3 map sample - d3.js

I'm trying to run a Fable D3 map sample and I see it requires a browser server module.
When I try to
npm run build
under the d3 folder it compiles
npm run build
> # build C:\...\d3
> node ../node_modules/fable-compiler
fable-compiler 0.7.50: Start compilation...
Compiled fable-import-d3\Fable.Import.D3.js at 03:00:47
Compiled d3\d3map.js at 03:00:48
Bundling...
Bundled out\bundle.js at 03:00:48
but then after
npm start
the browser at http://localhost:8080/ gets an Uncaught Error, SCRIPT5009 'Symbol' not defined:
if (typeof globalObj.__FABLE_CORE__ === "undefined") {
globalObj.__FABLE_CORE__ = {
types: new Map(),
symbols: {
reflection: Symbol("reflection"),
}
};
Edit
above problem was only related to IE11 (not to Chrome) and it's solved by adding
<script src="node_modules/core-js/client/core.js"></script>
in index.html
Now both IE11 and latest Chrome version raise
queue.v1.js:14 Uncaught Error
at newQueue (queue.v1.js:14)
at queue (queue.v1.js:109)
at d3.d_map (d3map.fsx:201)
at d3map.fsx:201
where queue.v1.js:14 is
function newQueue(concurrency) {
if (!(concurrency >= 1)) throw new Error;
because concurrency is zero... (all this refers to fable-compiler 0.7.50).

The server module is just a custom local server to host the sample. Fable 1.0 beta integrates with Webpack and Webpack Dev Server so that's not necessary. I've updated the d3 sample here, can you please give it a try? The new sample also includes the transform-runtime Babel plugin which automatically inserts the necessary polyfills (like Symbol) in your bundle so you don't have to worry about the core.js dependency :)

I've solved the error (queue.v1.js:14 Uncaught Error) in my edit (for fable-compiler 0.7.50) by defining (line 33)
let queue = importDefault<int->obj> "queue"
with int instead of unit and then calling
queue(2)
at line 201 instead of the empty c.tor queue()
Alternative, more elegant solution
As per line 33 of the new d3 sample linked to Alfonso Garcia-Caro's answer, we can just replace the queue definition with
let queue() = importDefault "queue"
and then use the simple queue() c.tor without arg
minor note
Notice that restoring the old line with
let queue = importDefault<unit->obj> "queue"
into the new sample with Fable 1.0 (integrated with Webpack Dev Server) doesn't cause any error. Oddly enough, IMHO it's only a strange behavior of the importDefault in fable-compiler 0.7.50

Related

Metaplex Auction House Error "Error processing Instruction 0: insufficient account keys for instruction"

I have been trying to run the execute_sale ix from the mpl-auction-house package but I get this error in the logs I have got the sellInstruction and buyInstruction working
This is my Code
const executeSellInstructionAccounts:ExecuteSaleInstructionAccounts = {
buyer:buyerwallet.publicKey,
seller:Sellerwallet.publicKey,
tokenAccount:tokenAccountKey,
tokenMint:mint,
metadata:await getMetadata(mint),
treasuryMint:new anchor.web3.PublicKey(AuctionHouse.mint),
auctionHouse:new anchor.web3.PublicKey(AuctionHouse.address),
auctionHouseFeeAccount:new anchor.web3.PublicKey(AuctionHouse.feeAccount),
authority:new anchor.web3.PublicKey(AuctionHouse.authority),
programAsSigner:programAsSigner,
auctionHouseTreasury:new anchor.web3.PublicKey(AuctionHouse.treasuryAccount),
buyerReceiptTokenAccount:buyerATA.address,
sellerPaymentReceiptAccount:Sellerwallet.publicKey,
buyerTradeState:BuyertradeState,
escrowPaymentAccount:escrowPaymentAccount,
freeTradeState:freeTradeState,
sellerTradeState:SellertradeState,
}
const executeSellInstructionArgs:ExecuteSaleInstructionArgs = {
escrowPaymentBump:escrowBump,
freeTradeStateBump:freeTradeBump,
programAsSignerBump:programAsSignerBump,
buyerPrice:buyPriceAdjusted,
tokenSize:tokenSizeAdjusted,
}
const execute_sale_ix = createExecuteSaleInstruction(
executeSellInstructionAccounts,executeSellInstructionArgs
)
const execute_sale_tx = new anchor.web3.Transaction(
{
recentBlockhash: blockhash,
feePayer: Sellerwallet.publicKey,
}
)
execute_sale_tx.add(execute_sale_ix);
const execute_sale_res = await sprovider.sendAndConfirm(execute_sale_tx);
There is currently a discrepancy between the published AuctionHouse SDK and the underlying Rust program.
The console reference implementation is here: https://github.com/metaplex-foundation/metaplex/blob/master/js/packages/cli/src/auction-house-cli.ts
The console reference implementation works because it loads the idl directly from the chain and is therefore up to date. It bypasses the AuctionHouse SDK completely.
However, if you're doing this in the browser, you probably don't want to load the IDL from the chain. You'd need things like a decompression library and that would blow up your package size quite a bit.
To work around this, I've forked metaplex repo here: https://github.com/neftworld/metaplex
The fork above has the following changes:
Including the IDL definition as a typescript src file (correct as at 30 May 2022)
Fetching auctionHouse program from local IDL definition instead getting it from the chain
Hence, you can use this as a base for your web implementation. To make this work on the web, you will need to remove references to keypair - console uses a key pair file - and use the browser wallet to sign the transaction before sending.

Tips on solving 'DevTools was disconnected from the page' and Electron Helper dies

I've a problem with Electron where the app goes blank. i.e. It becomes a white screen. If I open the dev tools it displays the following message.
In ActivityMonitor I can see the number of Electron Helper processes drops from 3 to 2 when this happens. Plus it seems I'm not the only person to come across it. e.g.
Facing "Devtools was disconnected from the page. Once page is reloaded, Devtools will automatically reconnect."
Electron dying without any information, what now?
But I've yet to find an answer that helps. In scenarios where Electron crashes are there any good approaches to identifying the problem?
For context I'm loading an sdk into Electron. Originally I was using browserify to package it which worked fine. But I want to move to the SDKs npm release. This version seems to have introduced the problem (though the code should be the same).
A good bit of time has passed since I originally posted this question. I'll answer it myself in case my mistake can assist anyone.
I never got a "solution" to the original problem. At a much later date I switched across to the npm release of the sdk and it worked.
But before that time I'd hit this issue again. Luckily, by then, I'd added a logger that also wrote console to file. With it I noticed that a JavaScript syntax error caused the crash. e.g. Missing closing bracket, etc.
I suspect that's what caused my original problem. But the Chrome dev tools do the worst thing by blanking the console rather than preserve it when the tools crash.
Code I used to setup a logger
/*global window */
const winston = require('winston');
const prettyMs = require('pretty-ms');
/**
* Proxy the standard 'console' object and redirect it toward a logger.
*/
class Logger {
constructor() {
// Retain a reference to the original console
this.originalConsole = window.console;
this.timers = new Map([]);
// Configure a logger
this.logger = winston.createLogger({
level: 'info',
format: winston.format.combine(
winston.format.timestamp(),
winston.format.printf(({ level, message, timestamp }) => {
return `${timestamp} ${level}: ${message}`;
})
),
transports: [
new winston.transports.File(
{
filename: `${require('electron').remote.app.getPath('userData')}/logs/downloader.log`, // Note: require('electron').remote is undefined when I include it in the normal imports
handleExceptions: true, // Log unhandled exceptions
maxsize: 1048576, // 10 MB
maxFiles: 10
}
)
]
});
const _this = this;
// Switch out the console with a proxied version
window.console = new Proxy(this.originalConsole, {
// Override the console functions
get(target, property) {
// Leverage the identical logger functions
if (['debug', 'info', 'warn', 'error'].includes(property)) return (...parameters) => {
_this.logger[property](parameters);
// Simple approach to logging to console. Initially considered
// using a custom logger. But this is much easier to implement.
// Downside is that the format differs but I can live with that
_this.originalConsole[property](...parameters);
}
// The log function differs in logger so map it to info
if ('log' === property) return (...parameters) => {
_this.logger.info(parameters);
_this.originalConsole.info(...parameters);
}
// Re-implement the time and timeEnd functions
if ('time' === property) return (label) => _this.timers.set(label, window.performance.now());
if ('timeEnd' === property) return (label) => {
const now = window.performance.now();
if (!_this.timers.has(label)) {
_this.logger.warn(`console.timeEnd('${label}') called without preceding console.time('${label}')! Or console.timeEnd('${label}') has been called more than once.`)
}
const timeTaken = prettyMs(now - _this.timers.get(label));
_this.timers.delete(label);
const message = `${label} ${timeTaken}`;
_this.logger.info(message);
_this.originalConsole.info(message);
}
// Any non-overriden functions are passed to console
return target[property];
}
});
}
}
/**
* Calling this function switches the window.console for a proxied version.
* The proxy allows us to redirect the call to a logger.
*/
function switchConsoleToLogger() { new Logger(); } // eslint-disable-line no-unused-vars
Then in index.html I load this script first
<script src="js/logger.js"></script>
<script>switchConsoleToLogger()</script>
I had installed Google Chrome version 79.0.3945.130 (64 bit). My app was going to crash every time when I was in debug mode. I try all the solutions I found on the web but no one was useful. I downgrade to all the previous version:
78.x Crashed
77.x Crashed
75.x Not Crashed
I had to re-install the version 75.0.3770.80 (64 bit). Problem has been solved. It can be a new versions of Chrome problem. I sent feedback to Chrome assistence.
My problem was that I was not loading a page such as index.html. Once I loaded problem went away.
parentWindow = new BrowserWindow({
title: 'parent'
});
parentWindow.loadURL(`file://${__dirname}/index.html`);
parentWindow.webContents.openDevTools();
The trick to debugging a crash like this, is to enable logging, which is apparently disabled by default. This is done by setting the environment variable ELECTRON_ENABLE_LOGGING=1, as mentioned in this GitHub issue.
With that enabled, you should see something along the lines of this in the console:
You can download Google Chrome Canary. I was facing this problem on Google Chrome where DevTools was crashing every time on the same spot. On Chrome Canary the debugger doesn't crash.
I also faced the exact same problem
I was trying to require sqlite3 module from renderer side
which was causing a problem but once i removed the request it was working just fine
const {app , BrowserWindow , ipcMain, ipcRenderer } = require('electron')
const { event } = require('jquery')
const sqlite3 = require('sqlite3').verbose(); // <<== problem
I think the best way to solve this (if your code is really really small) just try to remove functions and run it over and over again eventually you can narrow it down to the core problem
It is a really tedious , dumb and not a smart way of doing it , but hey it worked
I encountered this issue, and couldn't figure out why the the DevTool was constantly disconnecting. So on a whim I launched Firefox Developer edition and identified the cause as an undefined variable with a string length property.
if ( args.length > 1 ) {
$( this ).find( "option" ).each(function () {
$( $( this ).attr( "s-group" ) ).hide();
});
$( args ).show();
}
TL;DR Firefox Developer edition can identify these kinds of problems when Chrome's DevTool fails.
After reading the comments above it is clear to me that there is a problem at least in Chrome that consists of not showing any indication of what the fault comes from. In Firefox, the program works but with a long delay.
But, as Shane Gannon said, the origin of the problem is certainly not in a browser but it is in the code: in my case, I had opened a while loop without adding the corresponding incremental, which made the loop infinite. As in the example below:
var a = 0;
while (a < 10) {
...
a ++ // this is the part I was missing;
}
Once this was corrected, the problem disappeared.
I found that upgrading to
react 17.0.2
react-dom 17.0.2
react-scripts 4.0.3
but also as react-scripts start is being used to run electron maybe its just react scripts that needs updating.
Well I nearly went crazy but with electron the main problem I realized I commented out the code to fetch (index.html)
// and load the index.html of the app.
mainWindow.loadFile('index.html');
check this side and make sure you have included it. without this the page will go black or wont load. so check your index.js to see if there's something to load your index.html file :) feel free to mail : profnird#gmail.com if you need additional help
Downgrade from Electron 11 to Electron 8.2 worked for me in Angular 11 - Electron - Typeorm -sqlite3 app.
It is not a solution as such, but it is an assumption of why the problem.
In the angular 'ngOnInit' lifecycle I put too many 'for' and 'while' loops, one inside the other, after cleaning the code and making it more compact, the problem disappeared, I think maybe because it didn't finish the processes within a time limit I hope someone finds this comment helpful. :)
I have stumbled upon the similar problem, My approach is comment out some line that I just added to see if it works. And if that is the case, those problem is at those lines of code.
for(var i = 0;i<objLen; i+3 ){
input_data.push(jsonObj[i].reading2);
input_label.push(jsonObj[i].dateTime);
}
The console works fine after i change the code to like this.
for(var i = 0;i<objLen; i=i+space ){
input_data.push(jsonObj[i].reading2);
input_label.push(jsonObj[i].dateTime);
}
Open your google dev console (Ctrl + shift + i). Then press (fn + F1) or just F1, then scroll down and click on the Restore defaults and reload.

CKEditor TypeError: null is not an object (evaluating 'c.langEntries')

I have added a CKEditor ver 4.1 to my project ( NSBasic ) and am using it with datatables editor.
If I download any of the 3 CDEditor standard packages ( Basic - Standard or Full https://ckeditor.com/ckeditor-4/download/ ) it all works okay.
However if I create a custom package I get the following error :
TypeError: null is not an object (evaluating 'c.langEntries')
It flags here
CKEDITOR.plugins.setLang = function(a, d, b) {
var c = this.get(a);
a = c.langEntries || (c.langEntries = {}); //error here null is not an object (evaluating 'c.langEntries')
c = c.lang || (c.lang = []);
c.split && (c = c.split(","));
-1 == CKEDITOR.tools.indexOf(c, d) && c.push(d);
a[d] = b
};
The path to the CKEditor os here:
<script src="http://www.aceoftoons.com/ckeditorCustom3/ckeditor.js"></script>
Any ideas how I can trace the issue ?
You are most likely using a third-party plugin with language files configured incorrectly. I remember I once had such a problem with selectallcontextmenu plugin. I would recommend that you first start with plugins only created by CKSource (each plugin has its own website where you can check its author) and when it works start adding custom plugins one by one.
Third-party plugins are usually ok, but there are some which don't work as intended thus you need to be careful. Fortunately you can easily verify the plugin by looking at its compatibility table (it should support latest version released) and user comments. If there is anything wrong they will let the author know about it. If the author cares about this plugin he will fix this problem. If he does not he will leave it as it is. In such cases I recommend down voting such plugin so that other user could know.

determining location of deprecation warning on Ember.js

I upgraded to Ember 1.18 and I'm getting:
DEPRECATION: Using currentWhen with {{link-to}} is deprecated in favor of `current-when`.
at Ember.LinkView.EmberComponent.extend.init (http://example.com:8000/static/assets/vendor.js:33811:15)
at apply (http://example.com:8000/static/assets/vendor.js:32885:32)
at superWrapper [as init] (http://example.com:8000/static/assets/vendor.js:32459:15)
at apply (http://example.com:8000/static/assets/vendor.js:32885:32)
at new Class (http://example.com:8000/static/assets/vendor.js:47485:9)
at Function.Mixin.create.create (http://example.com:8000/static/assets/vendor.js:47943:16)
at CoreView.extend.createChildView (http://example.com:8000/static/assets/vendor.js:56278:23)
at Object.merge.appendChild (http://example.com:8000/static/assets/vendor.js:54369:26)
at CoreView.extend.appendChild (http://example.com:8000/static/assets/vendor.js:56161:34)
None of the traceback is my code, and I'm mainly using {link-to-animated} (without currentWhen explicitly).
How can I figure out where to find the problematic code?
The deprecation notice isn't showing a traceback to your code because the issue isn't in your code. :) Take a look at ember-animated-outlet.js and you'll see that currentWhen is used internally.
There's a few dirty tricks to silence deprecation warnings, but I would suggest just submitting a pull-request to the repo to have it changed. It should be a fairly easy fix.
EDIT: It seems there's already a pull request for that, but it hasn't been merged yet. So about those dirty tricks... If you're bugged by the deprecation warning, you can always override Ember.deprecate. Put the following somewhere before your app code is run (maybe in a vendor script):
var oldDeprecate = Ember.deprecate;
Ember.deprecate = function(message) {
if (message.indexOf('currentWhen') >= 0) {
return;
}
return oldDeprecate.apply(this, arguments);
};

Cache won't work in Appcelerator

Titanium SDK version: 1.6.
iPhone SDK version: 4.2
I am trying out the cache snippet found on the Appcelerator forum but I get an error: [ERROR] Script Error = Can't find variable: utils at cache.js (line 9).
I put this one (http://pastie.org/1541768) in a file called cache.js and implemented the code from this one (http://pastie.org/pastes/1541787) in the calling script, but I get the error.
What is wrong? I copied the code exactly.
Your problems is whilst the first pastie defines utils.httpcache. The variable utils is not defined outside of this function closure (because it is not defined anywhere in global namespace). As below shows.
(function() {
utils.httpcache = {
};
})();
To make it all work in this instance add the following code to the top of your cache.js file.
var utils = {};
This declares the utils variable in global namespace. Then when the function closure is executed below it will add utils.httpcache to the utils object.
The problem is actually not specific to Appcelerator and is just a simple JavaScript bug. Checkout Douglas Crockfords book, JavaScript the Good Parts. Reading it will literally make you a more awesome JavaScript developer.
You can't use utils.httpcache.getFromCache(url) until you add this to your code:
var utils = {};
That's because how the author created his function, it's called JavaScript module pattern and it's generally used to structure the code.
I seem to lose this value "value.httpCacheExpire = expireTime;" when the code does the "Titanium.App.Properties.setString(key,JSON.stringify(value));" so when I get it back using the getString method, there's no longer the "value.httpCacheExpire.
Anyone else have this issue? Am I missing something to get this working?

Resources